让两个div具有相同的高度

问题描述：

我有两个这样的div:

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

我想使div1的高度与div2的高度相同.

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

我该怎么办?谢谢！

JSFIDDLE

答

演示

Demo

最简单的解决方案是将两个div都包装在一个div中并使其显示为flex;

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

让两个div具有相同的高度

相关推荐