html垂直環繞頁面流

Question

說我有一個按字母順序排列的跨度列表。 通常使用HTML，如果我創建了一堆人，說顯示：inline-block的，他們會出現像這樣：

+------+------+------+ 
    | 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; }