我目前正在使用Bootstrap中的Cards
根据文字标题的不同,我会得到不同的卡片高度,并希望与最高的卡片高度相同。
我不介意使用JS,我实际上认为这可能是解决问题的最佳方法。
我尝试过使用CSS提供的不同解决方案,例如使用flexbox
作为一个动态示例,呈现的HTML是一个简单的示例:
  .card {
        float: left;
        width: 100%;
        padding: .75rem;
        margin-bottom: 2rem;
        border: 0;
    	box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
    }
    
    .card > img {
        margin-bottom: .75rem;
        display: block;
        width: 80%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    
    .card-text {
        font-size: 85%;
    }<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>SMITE FR</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/album.css" rel="stylesheet">
        <link href="css/ie10-viewport-bug-workaround.min.css" rel="stylesheet">
        <script src="https://www.w3schools.com/lib/w3data.js"></script>
        <link rel="import" href="navigation.html"> …