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＆amp;上方。

Answer 2

在第1项中，您使用div每个div padding:10px;，而第2项只需1 div，您可以在第2项中添加2 {1} {1}}和选项2.对项目2和项目2子项空白

应用div

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/ 即可适用于所有浏览器

如何设置相同的div高度

5 个答案: