HTML вертикальный перенос страницы

Question

Скажем, у меня есть список пролетов, это алфавитный список. Обычно с помощью html, если я создам их несколько, скажем display:inline-block, они будут отображаться так:

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

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

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

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

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

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

Answer 1

Очень близкая публикация найдена здесь Разметка колонок в 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; }