html вертикальная упаковка страницы поток

Question

Скажем, у меня есть список пролетов, который является алфавитным списком. Обычно с HTML, если я создаю кучу из них, скажем, дисплей: встроенный блок, они будут отображаться так:

+------+------+------+ 
    | a | b | c | 
    +------+------+------+ 
    | d | e | f | 
    +------+  +------+ 
    | g |------+ 
    +------+ 

И пойдет так широко, как страница позволит.

Как я могу вместо этого иметь фиксированную высоту, а потом укладывает вниз, пока она не заполнится, а затем перейти к следующему столбцу так:

+------+------+------+ 
    | a | d | f | 
    +------+------+------+ 
    | b | e | g | 
    +------+  +------+ 
    | c |------+ 
    +------+ 

Где каждый из этих квадратов является содержащим элементом.

Это ограниченный пример, я не хочу, чтобы он был в 3 раза выше, я не хочу заполнять любое вертикальное пространство, которое оно дано, а затем переходите к следующему столбцу.

Answer 1

очень близко размещение здесь Column layout in HTML(5)/CSS

Как я хотел бы сделать это должен быть добавить счетчик где-то в петлю, которая выводит столбцы что-то вроде (% 3) и после каждого третьего закрываем и очистите поплавок. Структура будет примерно такой:

<div class="myWrapper"> 

    <div class="col1"> 
     <div>a</div> 
     <div>b</div> 
     <div>c</div> 
    </div><!--col1--> 
    <div class="clear"></div><!--clear--> 

    <div class="col2"> 
     <div>d</div> 
     <div>e</div> 
     <div>f</div> 
    </div><!--col2--> 
    <div class="clear"></div><!--clear--> 

    <div class="col3"> 
     <div>g</div> 
     <div>h</div> 
     <div>i</div> 
    </div><!--col3--> 
    <div class="clear"></div><!--clear--> 

</div><!--myWrapper--> 

.myWrapper{} 
    .myWrapper > div{ float:left; width:30%; margin-right:1%; } 
    .myWrapper > div:last-child{ margin-right:0; } 
     .myWrapper div[class*='col'] > div{ max-height:200px; margin:10px 0; } 
.clear{ clear:both; }