CSS使两个div等于显示表的高度 [英] CSS making two divs equal height with display table

问题描述

在下面的HTML中，div .left和.right有不同的高度。是否可以使两个div相同的高度而不定义高度。我尝试使用display：table但不工作。

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 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/

推荐答案

删除 float ，它从文档的正常流程中取出元素，并添加另一个包装器元素，作为 table-row ：

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:

table-cell ，表现为< td> HTML元素

table-cell, behaves like the <td> HTML element

这个需要（虽然我没有验证我的推理） display：table-row parent，作为 td 需要 tr 父元素。

Which implies that this requires (though I've not verified my inference) a display: table-row parent, as a td requires a tr parent-element.

.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 Fiddle demo 。

参考文献：

• CSS显示。

• CSS display.

这篇关于CSS使两个div等于显示表的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！