不能讓DIV的高度相等

Question

通常很簡單，出於某種原因，我似乎無法在不使用min-height或jQuery的情況下連續獲得三個div的相同列高度。

我試圖在主div上使用display:table並display:table-cell child display:table-cell display:table上的display:table-cell 。 我不知道出了什么問題。 我也嘗試過其他解決方案，例如display:inline-block; 和:before { content:"" }; 正如其他幾個帖子所建議的那樣

<div class="row">

<!-- 3 times in a row, other two blocks cut here for overview on SO -->

<div class="columns small-12 medium-4 large-4">
<div class="highlighted-contentblock">
    <a href="#" target="_blank">
        <div class="contentheader">
            <div class="sequence">
                1
            </div>
            <h2>
                Lorem ipsum
            </h2>
        </div>
        Lorem
    </a>
</div>  
</div>
</div>

小提琴

 .large-4 {
    width: 33.33333%;
display:table; }


.highlighted-contentblock
{
    background:gray;
    display:table-cell;
}

小提琴

Answer 1

問題

看起來原始問題是嘗試將table-cell應用於highlight-contentblock而不是列。 columns類是行類的第一個子類，應該在那里應用table-cell。

列

您的列上有顯示表（應用於highlight-contentblock類）。 我將table-cell替換為應用於columns類的替換。

間距

Float刪除了邊距，因此我將其移除並在桌面上使用了邊框間距。

支持

這有效，但在IE 7中沒有.CSS技巧有更多信息 。

點擊下面的運行代碼段，查看其實際效果。

 /* Foundation replacement */ .row { padding-bottom:10px; max-width:980px; margin:0 auto; display:table; border-spacing:0.9375rem; } .columns { box-sizing:border-box; display:table-cell; background:gray; } .large-4 { width: 33.33333%; } 

 <div class="row"> <div class="columns small-12 medium-4 large-4"> <div class="highlighted-contentblock"> <a href="#" target="_blank"> <div class="contentheader"> <div class="sequence"> 1 </div> <h2> Lorem ipsum </h2> </div> Lorem </a> </div> </div> <div class="columns small-12 medium-4 large-4" data-equalizer-watch=""> <div class="highlighted-contentblock"> <a target="_blank" href=#> <div class="contentheader"> <div class="sequence"> X </div> <h2> Lorem ipsum <br/> Lorem ipsum </h2> </div> Lorem ipsum</a> </div> </div> <div class="columns small-12 medium-4 large-4" data-equalizer-watch=""> <div class="highlighted-contentblock"> <a target="_blank" href=#> <div class="contentheader"> <div class="sequence"> 3 </div> <h2> Lorem ipsum </h2> </div> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</a> </div> </div> </div> 

Answer 2

說實話，你的HTML有點亂。 你想要遵循這個簡單的結構：

<div class="row">
    <div class="col">Content</div>
    <div class="col">Content</div>
    <div class="col">Content</div>
</div>

然后設置一些簡單的CSS規則

.row {
    display: table;
}
.col {
    display:table-cell;
    width:33.33%;
}

這里至關重要的是設置表格單元格的寬度。

我已經更新你的小提琴，以顯示這個行動http://jsfiddle.net/eaqr1b17/5/

Answer 3

使用浮動元素，表/表格單元格渲染有點難以正確渲染...

如果可以，刪除浮動元素，並將其與表格單元格並排顯示。

代碼的第二個問題是你有一個用table-cell渲染的子元素的背景。 所以所有.column元素的高度都是相同的，但你不會用background-color看到它，因為該屬性被設置為具有自己高度的子元素...

這是你的小提琴的更新沒有浮動和邊框，以顯示高度是否正確設置，但你沒有看到它，因為你的bg顏色沒有應用於正確的元素：

http://jsfiddle.net/eaqr1b17/6/

/* Foundation replacement */
.row
{
    padding-bottom:10px;  
    display:table;
    border: 1px solid red;
 }
.columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    box-sizing: border-box;
    display: table-cell;
    border: 1px solid green;
}
.large-4 {
    width: 33.33333%; 
}
.highlighted-contentblock
{
    background:lightgrey;
}

Answer 4

對於你的標記，你可以這樣做：

http://jsfiddle.net/rvos3hx3/

/* Foundation replacement */
 .row {
    padding-bottom:10px;
    max-width:980px;
    margin:0 auto;
    display:table;
}
.columns {
    position: relative;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    box-sizing:border-box;
    background:gray;
    display:table-cell;
}
.large-4 {
    width: 33.33333%;
}

Answer 5

我想這就是你需要的：

HTML：

<div class="wrap">
<div class="row">
    <div class="cell">
    Lorem    
    </div>
    <div class="cell">
    Lorem impsum more text
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

而對於CSS：

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
.cell{
    width: 33.33%;
    display: table-cell; 
    background-color: #0f0;
}

如果你想看到它運行，請點擊這里小提琴

Answer 6

這是一個jsfiddle： http ： //jsfiddle.net/nrnLbv14/

HTML：

<div class="container">
    <div class="row">
        <div class="column">content 1</div>
        <div class="column">content 2</div>
        <div class="column">content 3</div>
    </div>
</div>

CSS：

.container {
    display:table;
    /* just styling to show it works */
    border-collapse: separate;
    border-spacing: 10px;
    background-color: gray;
}
.row {
    display:table-row;
}
.row .column {
    display:table-cell;
    background-color: #fff;
    width: 33.33%; // If you want all 3 columns equal width
}