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

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（仅适用于ex）来解决。

我不是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

将边框从内部类更改为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/