Question

我在列中有两个不同高度的元素（div中的文本并不总是相同）因此所有.top元素需要彼此相同的高度，并且所有.bottom元素需要与所有.bottom元素的高度相同。我知道这可以用javascript完成，但我不想用这个。可以在CSS中完成吗？

<div class="row">
  <div class="col">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
  <div class="col">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
  <div class="col">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
</div>

Answer 1

是的，可以用CSS完成。这将是一种方法。

＆＃13;

.row {
  display: table;
  width: 100%;
}

.col {
  display: table-cell;
  padding: 15px;
  width: 33%;
}

＆＃13;

<div class="row">
  <div class="col" style="background: blue;">
    <div class="top">
      <p>Lorem ipsum Lorem ipsum</p>
      <p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </div>
    <div class="bottom">Lorem ipsum</div>
  </div>
  <div class="col" style="background: yellow;">
    <div class="top">Lorem ipsum</div>
    <div class="bottom">Lorem ipsum</div>
  </div>
  <div class="col" style="background: red;">
    <div class="top">Lorem ipsum</div>
    <div class="bottom">Lorem ipsum</div>
  </div>
</div>

＆＃13;

添加了相等宽度的色列。

使列中的子项具有相同的高度

1 个答案: