不能让DIV的高度相等

Question

As simple as it normally is, for some reason I can't seem to get the same column heights for three divs in a row without using min-height or jQuery.

I am trying to use display:table on the main div and display:table-cell on the child's. I have no clue what is going wrong. I also tried other solutions, eg display:inline-block; and :before { content:"" }; as suggested in several other posts.

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

Fiddle

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


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

Fiddle

Answer 1

The Problem

It looks like the original issue was trying to apply table-cell to the class highlighted-contentblock instead of columns. The columns class is the first child of your row class and table-cell should be applied there.

Columns

You had display table on your columns (applied on the highlighted-contentblock class). I replaced that with table-cell applied to the columns class.

Spacing

Float removes margin so I removed that and used border spacing on your table instead.

Support

This works but not in IE 7. CSS tricks has more info .

Click run code snippet below to see it in action.

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

Your html is a bit messy to be honest. You want to be following this simple structure:

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

And then set a few simple CSS rules

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

The crucial thing here is setting the width of your table cells.

I have updated your fiddle to show this in action http://jsfiddle.net/eaqr1b17/5/

Answer 3

With floated element, the table/table-cell rendering is a bit difficult to render correctly...

If you can, remove the float element, and display them side by side with the table-cell.

The second problem of your code is that you have a background on the child element of the one that is rendered with a table-cell. So the height of all .column elements will be the same, but you won't see it with the background-color, because that property is setted to the child element that has its own height...

Here is an update of your fiddle without the float and with a border to show you that the height is correctly setted, but you don't see it because your bg-color is not applied to the right element :

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

For your markup you have do to it like this:

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

I think this is what you need:

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>

And for the 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;
}

if you want to see it running click here Fiddle

Answer 6

Here is a 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
}