无论内容如何，​​使两列具有相同的高度

Question

我有一个非常基本的基本网格系统，它将“单元格”并排放在一个流畅的“行”中。我希望两个单元格总是匹配它们的高度，所以它们是相同的。因此，如果一个内容比另一个更多，则另一个扩展以匹配具有更多内容的单元格的高度。

<div class="row">
    <div class="cell1">
        <div class="inner">
            <h2>Cell 1</h2>
            <p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>            
        </div>
    </div>
    <div class="cell2">
        <div class="inner">
            <h2>Cell 2</h2>
        </div>
    </div>
</div>

此处演示问题：http://jsfiddle.net/QDBff/

Answer 1

如果绝对必须避免使用TABLE，则可以将div设置为与

表格相似

display: table;
display: table-row;
display: table-cell;

你可以看一下这个小提琴的标记/ css和结果：http://jsfiddle.net/aeinbu/QDBff/35/

Answer 2

我在这里使用jQuery：http://jsfiddle.net/QDBff/10/

$(document).ready(function() {
    var height1 = $('.cell1 > .inner').height();
    var height2 = $('.cell2 > .inner').height();
    if (height1 < height2) {
        $('.cell1 > .inner').height(height2);
    } else {
        $('.cell2 > .inner').height(height1);
    }
});

Answer 3

<table><tr><td>Cel 1</td><td>Cel 2</td></tr></table>

Answer 4

我已经检查了你的小提琴，我认为可以通过添加270px的最小高度来修复（仅限例如）。

我不是jsfiddle用户，但请看下面我的屏幕截图...

注意：

您只需调整最小高度即可满足您的需求。只要文本大小增加或减少，就必须进行调整。

但是，如果您的内容是动态的，那么这不是一个永久的解决方案。

Answer 5

在您的单元格中添加一个较大的填充底部和一个相等的负边距底部，并将overflow: hidden粘贴到您的行上。

.cell {
    width: 50%;
    background: #eee;
    float: left;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

.cell:nth-child(odd) { background: #ddd; }

.row { overflow: hidden; }

.row:after {
    content: "";
    clear: both;
    display: table;
}

此处示例：

http://jsfiddle.net/Q9U6g/1/

Answer 6

您可以使用

来实现这一目标

display: table

和

display: table-cell

我修改了你的jsfiddle - http://jsfiddle.net/Raver0124/QDBff/36/

我之前创建的另一个jsfiddle - http://jsfiddle.net/jBMBR/6/

Answer 7

将Inner类的边框更改为Cell1和Cell2类。然后给Cell1和Cell2类赋予固定的高度。

.cell1 {
width: 45%;
margin-right: 1%;
float: left;
border: 1px solid #CCC;
height:400px; 
}

.cell2 {
width: 45%;
margin-left: 1%;
float: left;
border: 1px solid #CCC;
height:400px;
}

这是小提琴 http://jsfiddle.net/QDBff/31/