如何使用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中的“最高”。

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

Answer 1

您可以为此使用flex-box。只需在boxBooking div周围放置一个包装div并将其设置为display：flex。然后将其中的每个div设置为flex-gorw：1，它们都将占用相同的空间。

请注意，我只是在它们周围放了一个红色边框，以表明它们的高度相同。

.boxBooking-wrapper  {
display: flex;
}


.boxBooking{
  width:14.28%;
  flex-grow:1;
  border: solid 1px red;
}

<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>

Answer 2

您可以尝试使用flexbox检查打击更新的片段

.main {
  display: flex;
}

.boxBooking {
  width: 100%;
  border: 1px solid red;
  margin: 2px;
}

<div class="main">
  <div class="boxBooking">

  </div>

  <div class="boxBooking">
    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="boxBooking">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </div>
</div>

Answer 3

使用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>