让孩子划分最高的孩子的身高 [英] Make children divs the height of tallest child
本文介绍了让孩子划分最高的孩子的身高的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在父容器< div>
中有两个子< div>
元素:
I have two child <div>
elements inside of a parent container <div>
as shown:
<div class="row">
<div class="item">
<p>Sup?</p>
</div>
<div class="item">
<p>Sup?</p>
<p>Wish that other guy was the same height as me</p>
</div>
</div>
我试过下面的CSS:
.item {
background: rgba(0,0,0,0.1);
display: inline-block;
}
.row {
border: 1px solid red;
}
如何获得两个孩子( div.item
How can I get both children (div.item
) to be the height of the tallest child?
jsFiddle: http://jsfiddle.net/7m4f7/
jsFiddle: http://jsfiddle.net/7m4f7/
推荐答案
一个解决方案是将显示值从<后代 div.item
的 inline-block
到 table-cell
>元素:
One solution is to change the display value from inline-block
to table-cell
for the descendant div.item
elements:
.row {
border: 1px solid red;
display: table;
border-spacing: 20px; /* For controlling spacing between cells... */
}
.item {
background: rgba(0,0,0,0.1);
display: table-cell;
}
这篇关于让孩子划分最高的孩子的身高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文