Как мне создать 4 колонки css float, оставленные без одинаковой высоты

Question

Это мой текущий css http://jsfiddle.net/3xcxb/

Я хочу, чтобы вывод был таким ...

Дайте мне знать ..

Answer 1

Два небольших изменения:

• Использовать несколько <ul> с.Я добавил закрывающую </ul> после каждой секунды <li> и ограничил их ширину в CSS.Подумайте о макете как о четырех столбцах по два (или более) элемента в каждом.
• Сделайте <ul> s плавающим влево вместо <li> s.

Обновленная скрипка: http://jsfiddle.net/redler/3xcxb/1/

Answer 2

Используйте вертикальные столбцы вместо горизонтальных строк.

Пример:

<style type="text/css">
    .column {
        float: left;
        width: 25%;
    }
</style>

<div id="container">
    <div class="column column1">
        blocks here...
    </div><!-- end .column1 -->
    <div class="column column2">
        blocks here...
    </div><!-- end .column2 -->
    <div class="column column3">
        blocks here...
    </div><!-- end .column3 -->
    <div class="column column4">
        blocks here...
    </div><!-- end .column4 -->
</div><!-- end #container -->

http://jsfiddle.net/j3Z3J/1/