合理的内嵌式div的高度为100％

Question

I have a page with a dynamic number of boxes that I would like to distribute over several columns and lines.

I have the following wishes:

• Content of the boxes is different in height, but I want all div's in one 'line' to have the same height for visual appearance. They have a border and background color.
• I'dd like to justify columns over the page width

Ideally I'dd like the page to be responsive, so the number of columns should adjust to the browser width. But after reading and watching a lot of examples I don't see how this is possible in combination with the justifying, as that always needs a row div.

So I'm going for a fixed number of columns. With all kinds of examples I came to this solution, but there is still one challenge: getting each div to have the same height:

http://jsfiddle.net/johannesklapwijk/BQJ6A/

HTML:

<div class='row'>
    <div class='cell'>a<br/>b</div>
    <div class='cell'>a<br/>b<br/>c</div>
    <div class='cell'>a<br/>b</div>
    <span class='stretch'/>
</div>

CSS:

.row {
    text-align: justify;
    border: 1px solid red;
    padding: 0;
}
.cell {
    display: inline-block;
    width:30%;
    height: 100%; /* does not get the height of the parent div */
    border: 1px solid black;
   background-color: green;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

I have two questions I guess:

1. The first question (might make the other absolete), is there a better solution, for example with jQuery to really make a dynamic grid of div's that distrubute nicely based on browser width?
2. If not: can the height problem be fixed?

Thanks!

Answer 1

So like this? (Change the con width to 100% if you want it the size of the browser)

HTML:

<div class="con">
    <div class="col">asd</div>
    <div class="col">asdasdasd
        <br />asdas
        <br />asdasd
        <br />asdasd
        <br />asdasd</div>
    <div class="col">asd</div>
</div>

CSS

.con {
    height: 100%;
    width: 400px;
    display: table;
    table-layout: fixed;
}
.col {
    display: table-cell;
    border: #000000 solid 1px;
}

DEMO HERE

And for if you want it the size of the browser change width on .con

width: 100%;

DEMO HERE

and if you want the spacing like you have on yours add border-spacing to .con

border-spacing: 10px;

DEMO HERE

Answer 2

I've been trying to find something that meets my needs and I'm afraid CSS only is not enough.

I guess the jQuery freewall plug-in might give me what I need, even though it might be a bit heavy for my wishes.

http://vnjs.net/www/project/freewall/