如何设置div的相同高度 [英] How set the same height of divs

问题描述

这是我的情况。

HTML

<div id="content">
    <div id="item1">
        <div class="empty">&nbsp;</div>
        <div class="empty">&nbsp;</div>
        <div class="empty">&nbsp;</div>
    </div>
    <div id="item2">
        <div class="empty">&nbsp;</div>
    </div>
</div>

CSS

.empty
{
    width: 100px;
    height: 100px;
    background-color: red;
}

#item1
{
    float: left;
    padding: 10px;
    background-color: green;
}

#item2
{
    float: left;
    padding: 10px;
    background-color: blue;
}

#content
{
    padding: 10px;
    background-color: pink;
    overflow: hidden;
}

这看起来 http://jsfiddle.net/59qEt/3/

所以我的问题是：将我的样式设置为＃item2与＃item1具有相同的高度？

So my question is: How I must set my styles to #item2 has the same height which #item1 have?

任何帮助都会感激。

推荐答案

您可以使用 display：table-cell 属性。并删除 float：left 这样写：

You can use display:table-cell property for this. and remove float:left write like this:

#item1, #item2
{
    display:table-cell;
}

检查此 http://jsfiddle.net/59qEt/5/

注意它的工作直到IE8&

Note it's work till IE8 & above.

这篇关于如何设置div的相同高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！