<分区>
<分区>
我在列中有几个高度不同的元素(div 中的文本并不总是相同的)所以所有 .top 元素需要彼此高度相同，并且所有 .bottom 元素需要与所有 .bottom 元素的高度相同。我知道这个 cna 可以用 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>
最佳答案
是的，它可以用 CSS 来完成。这将是一种方法。
.row {
display: table;
width: 100%;
}
.col {
display: table-cell;
padding: 15px;
width: 33%;
}<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>添加了等宽列。
关于html - 使列中的子项高度相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47092096/