如何设置相同的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及以上.