在以下
HTML中,div .left和.right具有不同的高度.是否可以使两个div的高度相同而不定义高度.我已经尝试使用display：table但是不起作用.
HTML：
<div class="wrap">
<div class="left">
Lorem
</div>
<div class="right">
Lorem ipsum dolor sit amet,consectetur adipiscing elit.
</div>
</div>
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/
解决方法
删除浮动,它将元素从文档的正常流中取出,并添加另一个包装元素作为表行：
table-cell,behaves like the<td>HTML element
这意味着这需要(虽然我没有验证我的推论)显示：table-row parent,因为td需要一个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;
}
参考文献：
> CSS display.
