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 及更高版本。

Answer 2

div在第 1 项中，您每个都div使用3 padding:10px;，在第 2 项中只有 1 个div，您可以在第 2 项中做 2 件事 1 添加 3div和选项 2。适用height于第 2 项和第 2 项子项为空

Answer 3

你可以尝试这样的事情：

#item2 > div {
    padding-bottom:200px;
}

这是这个的小提琴：

http://jsfiddle.net/59qEt/24/

Answer 4

从 css 中删除 item2 `

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

`

Answer 5

只需添加两串 JavaScript http://jsfiddle.net/59qEt/20/ 适用于所有浏览器