Question

我有两个这样的div：

<div id="div1">ABC</div>
<div id="div2">ABC DEF GHI JKL MNO</div>

#div1 {
    width: 50px;
    background-color: red;
    float: left;
}

#div2 {
    width: 50px;
    background-color: green;
    float: left;
}

我想让div1的高度与div2的高度相同。

我该怎么办？谢谢！

JSFIDDLE

Answer 1

<强> Demo

最简单的解决方案是将div中的div包装起来并使其显示flex;

HTML

<div class="wrapper">
    <div id="div1">ABC</div>
    <div id="div2">ABC DEF GHI JKL MNO</div>
</div>

CSS

.wrapper {
    display: flex;
}

Answer 2

使用jquery你可以做这样的事情：

var tallness = $("#div2").height();
$("#div1").height(tallness);

JSFIDDLE

Answer 3

这样你的两个div将获得相同的高度（最大Div的高度）

（此代码使用JQuery）

$( document ).ready(function() {
    var s1 = $('#div1').height();
    var s2 = $('#div2').height();

    if (s1 > s2)
        $('#div2').css('height', s1 + "px");
    else
        $('#div1').css('height', s2 + "px");
});

Answer 4

如果您介意使用旧的浏览器或以旧的方式执行此操作，您可以查看http://alistapart.com/article/fauxcolumns现在可靠的经典版本:)并且因为元素的宽度而符合您的需求已经确定了。

一个非常古老的模板仍然使用这种方法使用3 col布局：http://www.pixy.cz/blogg/clanky/css-3col-layout/（没有flex也没有表，也没有js;）

让两个div具有相同的高度

4 个答案: