css - 如何设置相同高度的div

Question

这是我的情况

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 的高度相同？

如有任何帮助，我们将不胜感激。

Answer 1

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

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

检查这个http://jsfiddle.net/59qEt/5/

请注意它在 IE8 及更高版本之前有效。