Question

假设我有两列，都由<div>块表示。两列都可能比另一列长，所以我想强制较小的一个像另一个一样大。

我的问题示例：http://jsfiddle.net/TvnSJ/

如您所见，第二列较小。

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

Answer 1

您可以使用display: table和display: table-cell。这是您的小提琴更新：http://jsfiddle.net/TvnSJ/2/

这会使div呈现为td。基本上，当语义不正确时，您可以在不使用表的情况下获取表的布局。我不认为你可以漂浮它们。

编辑：我刚注意到有关保证金的信息。您可以为这些添加填充，或者您可以将内容包装在另一个元素中，并在需要分色以不包括背景颜色时为其添加边距。

Answer 2

这是使用我最近使用的2个容器的另一种方法

<div class="container2">
    <div class="container1">
        <div class="col1">
            a<br />b<br />c
        </div>
        <div class="col2">
            a
        </div>
    </div>
</div>

CSS：

.container2 {
    clear:left;
    float:left;
    width:100px;
    overflow:hidden;
    background:blue; /* column 2 background colour */
    color: white;
}
.container1 {
    float:left;
    width:100px;
    position:relative;
    right:50%;
    background:green; /* column 1 background colour */
    color: white;
}
.col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
.col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

小提琴：http://jsfiddle.net/Lunf6/1/ 灵感来自：http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Answer 3

这可以使用新的盒子模型在CSS3中实现：

.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/

Answer 4

尽管问题＃2完全和令人满意地解决了这个问题，但它有一个很大的缺点需要考虑：它在IE7及以下版本中不起作用。

如果您需要太支持旧浏览器，还有另一种基于填充，边距和溢出属性的方法。这有点棘手，但它确实有效：

定义一个容器div，它作为“colum-row”，如下所示：

<div class="column-row"></div>

.column-row {overflow: hidden}

然后在其中放入一些列。并设置样式填充和边距以强制虚假溢出：

<div class="column-row">
   <div class="column">Column 1</div>
   <div class="column">Column 2</div>
   ...
</div>

.column-row {overflow: hidden}
.column {float: left; padding-bottom: 99999; margin-bottom: -99999}

所以，你会得到一堆看起来大小相等的列，其高度值对应最大值。

如果你想玩一个有效的例子，我已经编辑了prevows jsFiddle（现在在 http://jsfiddle.net/TvnSJ/16/）。

Answer 5

要在向一个内容添加内容后自动获得两个div相同的高度，您需要使用javascript或jquery。以下是可以为您执行此操作的jQuery。只需将＃column-1更改为第一列的ID，将＃column-2更改为第二列的ID。

$(document).ready(function(){
    x = $('#column-1').height();
    y = $('#column-2').height();
        if x > y {
            $('#column-2').height(x);
        else {
            $('#column-1').height(y);
}
});

Answer 6

如果你想要相同但使用表格：

<table style="width: 100%;">
<tbody>
<tr>
    <td style="background: #006600;">a<br/>b</td>
    <td style="width: 5px;"></td>
    <td style="background: #BB0000;">a</td>
</tr>    
</tbody>
</table>

您可以使用填充，边距等来设置表格及其单元格的样式：

.TABLE-DEFAULT{    
    border          : 0px;
    border-collapse     : separate;
    border-spacing      : 0px;
    width           : 100%;
    background          : transparent;
}

.TABLE-DEFAULT td{
    padding: 4px;

}

.TABLE-DEFAULT td:FIRST-CHILD{
    padding: 0px;

}
.....etc

使两个并行的`<div>`列具有相同的高度</div>

6 个答案: