CSS使两个div与显示表的高度相等

Question

在下面的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/

Answer 1

删除float,将元素从文档的正常流中取出,并添加另一个包装元素,作为table-row:

table-cell,表现得像<td> HTML元素

这意味着这需要(虽然我没有验证我的推断)display: table-row父母,因为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;     
}?

JS小提琴演示.

参考文献:

• CSS显示.

Answer 2

像这样的东西？

http://jsfiddle.net/fJbTX/3/

我拿出浮动物业