让两个div具有相同的高度 [英] Let two divs have the same height

问题描述

我有两个这样的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具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！