14

在以下 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/

4

2 回答 2

23

删除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 小提琴演示。

参考：

于 2012-07-20T20:12:03.327 回答
5

像这样的东西？

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

我拿出了浮动财产

于 2012-07-20T20:10:45.660 回答