使两个平行的< div>`colums具有相同的高度

本文介绍了使两个平行的< div>`colums具有相同的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

假设我有两个列，都由< div> 块表示。

Suppose I have two columns, both represented by a <div> block. Both columns may grow larger than the other, so I want to force the smaller one to grow as big as the other.

我的问题的例子： jsfiddle/TvnSJ/

如您所见，第二列较小。

As you can see, the second column is smaller.

我设法使用表来解决这个问题，但是我无法在它们之间添加边距。边距很重要，所以我想知道另一个解决方案。

I managed to solve this using tables, but I was unable to add margin between them. The margin is important, so I would like to know another solution.

推荐答案

：

.box { width:100px; display:box; /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; /* W3C */ display:box; box-orient:horizontal; } .box .column1 { -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari and Chrome */ -ms-flex:1.0; /* Internet Explorer 10 */ box-flex:1.0; background: yellow; } .box .column2 { -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari and Chrome */ -ms-flex:1.0; /* Internet Explorer 10 */ box-flex:1.0; background: green; }

和HTML

<div class="box"> <div class="column1"> a<br>b </div> <div class="column2"> a </div> </div>

我使用这里的示例 www.w3schools

小提琴 jsfiddle/w5ELr/