a grid of divs with unkown and equal height

i have an unknown number of divs with unknown data in each div (unknown height) these divs have same width say 300px. i need to place them one after another so i get a grid as a result. all divs in each row should have same height so each row would be flat and the whole grid would look good.

my current version does not work. it makes a grid with d开发者_StackOverflow社区ifferent heights. im thinking of setting all heights by javascript.

<style>
    .inline {
        width:300px;
        display:inline-block;
        vertical-align:top;
    }
</style>

    <div class="inline">
        Some Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
        Some More Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
        Some More Text
        Some More Text
        Some More Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
    </div>
    <div class="inline">
        Some More Text
        Some More Text
        Some Text
    </div>

You could use CSS property display: table-cell

http://jsfiddle.net/AGjBM/

<style>
    div {
        display: table-cell;
        border: 1px solid;
    }
</style>

    <div class="table-cell">
        Some Text
    </div>
    <div class="table-cell">
        Some Text<br>
        Some More Text
    </div>

Here's a decent strategy for equal-height columns on Position is Everything, and it looks like it will do what you're looking for. If not, then you can find dozens of other techniques with a little help from your favorite search engine.