Div позиционирования по вертикали и по горизонтали

Question

Есть ли способ позиционировать DIV как это:

|----------||----------||----------||----------| 
| div1 || div5 ||   || div10 | 
|----------||----------|| div7 ||----------| 
| div2 ||   ||   || div11 | 
|----------|| div6 ||----------||----------| 
| div3 ||   || div8 || div12 | 
|----------||   ||----------||----------| 
| div4 ||   || div9 || div13 | 
|----------||----------||----------||----------| 

Так что я хотел бы сделать, это имея горизонтально расширяющуюся компоновку, не прокручивать по вертикали, он просто заполняет его с пространством, которое оно имеет вертикально, а затем перемещается горизонтально. Итак, первый элемент идет справа вверху, второй под ним, третий, пока не останется свободного места, а затем он вернется наверх (например, div5).

Answer 1

Это вертикальное эквивалентно тому, как течь плавающих элементов в горизонтальном направлении в контейнере (как если бы float:top были поддержаны).

Как отметил @MarcB, в будущем это будет легко справиться с CSS3 columns. Стандарт еще полностью не определен, но она может выглядеть примерно следующее:

.container { 
    height: 200px; 
    column-width: 100px; 
    column-gap: 10px; 
    column-fill: auto; 
} 

В время, JQuery плагин может быть лучшим выбором. Например, jQuery Masonry имеет one-column formatting, что может сделать трюк. Там могут быть более простые плагины jQuery, которые также будут адекватными.

Похожие термины поиска: JQuery, CSS столбцы, нескольких столбцов макет, плиточный макет, мозаика макет

Answer 2

Вы должны взглянуть на схему CSS чертежа. Я использовал его для создания веб-сайта, который был похож на ваш пост, его очень легко использовать и быстро.

http://www.blueprintcss.org/