Html CSS使两个div与显示表等高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11586277/
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
CSS making two divs equal height with display table
提问by user1355300
In the following HTML, the div .left and .right have different heights. Is it possible to make both divs same height without defining the height. I have tried using display:table but does not work.
在下面的 HTML 中，div .left 和 .right 具有不同的高度。是否可以在不定义高度的情况下使两个 div 的高度相同。我曾尝试使用 display:table 但不起作用。
HTML:
HTML：
<div class="wrap">
<div class="left">
Lorem
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
CSS:
CSS：
.wrap{
overflow:hidden;
width:250px;
display: table;
border-collapse: collapse;
}
.left{
width:100px;
float:left;
display: table-cell;
border-bottom:1px solid green;
}
.right{
width:150px;
float:left;
border-bottom:1px solid red;
display: table-cell;
}
jsfiddle:http://jsfiddle.net/fJbTX/1/
jsfiddle：http : //jsfiddle.net/fJbTX/1/
回答by David says reinstate Monica
Remove the float, which takes the elements out of the document's normal flow, and also add in another wrapper element, to act as the table-row:
删除float，它将元素从文档的正常流中取出，并添加另一个包装元素，以充当table-row：
table-cell, behaves like the<td>HTML element
table-cell, 行为类似于<td>HTML 元素
Which implies that this requires (though I've not verified my inference) a display: table-rowparent, as a tdrequires a trparent-element.
这意味着这需要（虽然我没有验证我的推论）一个display: table-row父元素，因为 atd需要一个tr父元素。
.wrap{
overflow:hidden;
width:250px;
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
.left{
width: 50%;
display: table-cell;
background-color: #0f0;
}
.right{
width: 50%;
background-color: #f00;
display: table-cell;
}?
References:
参考：
回答by Huangism
Something like this?
像这样的东西？
I took out the float property
我取出了浮动属性
