使两个平行的< div>`colums具有相同的高度 [英] Make two parallel `<div>` colums the same height

问题描述

假设我有两个列，都由< 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.

我的问题的例子： http://jsfiddle.net/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>

我使用这里的示例 http://www.w3schools.com

小提琴 http://jsfiddle.net/w5ELr/

这篇关于使两个平行的< div>`colums具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！