CSS 让孩子成为最高孩子的身高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16594891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make children divs the height of tallest child
提问by Don P
I have two child <div>elements inside of a parent container <div>as shown:
如图所示，我<div>在父容器中有两个子元素<div>：
<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>
I tried the following CSS:
我尝试了以下 CSS：
.item {
background: rgba(0,0,0,0.1);
display: inline-block;
}
.row {
border: 1px solid red;
}
How can I get both children (div.item) to be the height of the tallest child?
我怎样才能让两个孩子 ( div.item) 成为最高孩子的身高？
jsFiddle: http://jsfiddle.net/7m4f7/
jsFiddle：http: //jsfiddle.net/7m4f7/
采纳答案by Yana
One solution is to change the display value from inline-blockto table-cellfor the descendant div.itemelements:
一种解决方案是将后代元素的显示值从inline-block更改table-cell为div.item：
.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;
}
回答by nullability
Another solution is to use flexbox: http://jsfiddle.net/7m4f7/4/
另一种解决方案是使用 flexbox：http: //jsfiddle.net/7m4f7/4/
.item {
background: rgba(0,0,0,0.1);
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.row {
border: 1px solid red;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
However, support is limited (but getting better!) See http://caniuse.com/flexbox
然而，支持是有限的（但越来越好！）见http://caniuse.com/flexbox
Otherwise you need to use javascript to set the heights manually.
否则，您需要使用 javascript 手动设置高度。
回答by fnostro
jquery version: FIDDLE
jquery 版本：FIDDLE
var maxheight = 0;
$('div div.y').each(function () {
maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight);
});
$('div div.y').height(maxheight);
EDIT: Just noticed you're not dealing with the height of <div>'s, but <p>'s
编辑：刚刚注意到你没有处理<div>'s的高度，但是<p>'s
