如何使两个卡片高度相同

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;

- user1983152

---

什么是.card？HTML在哪里？ - J. Titus

你可以使用flexbox，最短的元素会根据最高的元素来确定高度，并且所有元素会均匀地拉伸。https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Hastig Zusammenstellen

那些是放在一个 div 里面的表格，对吧？ - Maher Fattouh

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>

- Adam

---

这个答案节省了我很多时间。谢谢。 - Wenuka

Answer 2

.container {
  width: 100%;/*whatever size you want your container*/
  border: 3px solid teal;
  display: flex; /*Make sure to call this on your container*/
  align-items: stretch; /*stretches all cards same height*/
  justify-content: space-around; /*some space between cards*/
}

.card {
  width: 150px; /*or whatever size card you want*/
  border: 2px solid red;
}

<div class="container">

  <div class="card">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </div>
  
  <div class="card">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
  
  <div class="card">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
  
</div>

这是对我最有效的方法，

我在卡片容器上设置了display: flex（而不是卡片本身）。

当你说display: flex时，默认情况下flex-direction: row 。

然后只需在容器上添加align-items: stretch...

这会导致我的卡片具有相等的高度。（此解决方案仅在flex-direction设置为row时有效）

希望这可以帮助到您

- Michiel J Otto

---

由于这是一个旧问题，而且其他答案也不错，如果你想回答的话，应该附上代码片段来展示你的解决方案。 - A. Meshu

当然，如果你想看一个例子，我会编辑我的回答并添加一段代码片段。 - Michiel J Otto

Answer 3

如果它们在同一行，则可以对该行使用display:flex;flex-direction:row;，但如果它们不在同一行，则可以使用jQuery。下面的代码片段将使具有class="card"的每个div高度相同。

$(document).ready(function (){
  var maxHeight = 0;
  for(i=0;i<$(".card").length;i++){
    if($(".card").eq(i)){
      var currentHeight = $(".card").eq(i).height();
      if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  $(".card").height(maxHeight);
});

- ab29007

---

最好的方法是使用flex:row;，但如果它们不在同一行，那就不起作用了。 - ab29007

问题解决了吗？如果是的话，能否为此问题选择一个答案？ - ab29007

这可能是最快的解决方案。 - 3lpm