Let two divs have the same height [duplicate]

问题

I have two divs like that:

<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;
}

And i'd like to make the height of div1 is the same height of div2.

How can i do? Thanks!

JSFIDDLE

回答1:

Demo

the simplest solution is to wrapper both the divs in a div and make it display flex;

html

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

css

.wrapper {
    display: flex;
}

回答2:

With jquery you could do something like this:

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

JSFIDDLE

回答3:

With this your two div will get the same height (height of the biggest Div)

(This code use 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");
});

回答4:

If you mind old browser or oldish solid way to do this you can look at http://alistapart.com/article/fauxcolumns a classic that is now reliable for ages :) and fits to your needs since width of element is set.

A very old template still acurate using this method with a 3 col layout : http://www.pixy.cz/blogg/clanky/css-3col-layout/ (no flex nor table nor js there ;) )

来源：https://stackoverflow.com/questions/25145686/let-two-divs-have-the-same-height

标签

jquery

html

css

css-float

height