html - 如何用css设置高度与下一个类相同

Question

也许这是一个普遍的问题，但请帮助我。我有一个 CSS 类，我经常在我的 HTML 中使用它，例如

.boxBooking {
  width: 14.28%;
}

<div class="boxBooking">
  ....
</div>

<div class="boxBooking">
  test<br/> test
  <br/>
</div>

<div class="boxBooking">
  a<br/> b
  <br/> c
  <br/> d
  <br/>
</div>

如果我在 CSS 中设置 height 属性，那么高度不会动态地跟随我的 HTML 中的“最高”。

我想要，哪个是“最高”的将是其他默认高度属性，即使其他没有内容。这可能吗，我该怎么做。

标签： htmlcssheight

Answer 1

利用display:table/table-cell

.boxBooking-wrapper  {
  display:table;
  
}


.boxBooking{
  width:14.28%;
  display:table-cell;
  border: 1px solid black;
}

<div class="boxBooking-wrapper">
  <div class="boxBooking">
  </div>

<div class="boxBooking">
  test<br/>
  test<br/>
</div>

  <div class="boxBooking">
    a<br/>
    b<br/>
    c<br/>
    d<br/>
  </div>
</div>