無論內容如何，​​使兩列的高度相同

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/