html - 如何让两张卡片的高度相同

Question

我怎样才能为黑人非洲玩家和白人玩家制作两张相同高度的卡片所有这些卡片都使用相同的类是否有办法让它具有相同的高度

div.card {
    overflow: hidden;
}

.card {
    width: 100%;
    padding: 9px 20px 9px 20px;
    margin-bottom: 0px;
    background: #ffffff;
    box-shadow: 1px 1px 1px #dfdfdf;
    box-sizing: border-box;
    height: 100% !important;

Answer 1

Flexbox 在这里就派上用场了。请注意最后一个元素(具有三个 <br> 的元素比其他两个元素高，但它们的高度都相同:

* { box-sizing: border-box; }

.container { 
  display: flex; 
  flex-flow: row wrap;
}

.card-wrap {
  flex: 0 0 33.333%;
  display: flex;
  padding: 10px; /* gutter width */
}

.card {
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  flex: 0 0 100%;
}

<div class="container">
<div class="card-wrap">
  <div class="card"><br></div>
</div>
<div class="card-wrap">
  <div class="card"><br></div>
</div>
<div class="card-wrap">
  <div class="card"><br><br><br></div>
</div>
</div>