让两个div具有相同的高度

本文介绍了让两个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; }