佈局（浮動）與CSS不同高度塊

Question

我有這樣的div，這樣的HTML，如下：

http://pastebin.com/Xt2Ws2EU

和一些CSS：

#manufacturers-list{ 
    width: 690px; 
    height: 980px; 
    max-height: 980px; 
    margin: 10px 0 0 0; 
    .man-area{ 
    margin: 6px 0 0 6px; 
    width: 210px; 
    float: left; 
    ul, li{ 
     margin: 0; 
     padding: 0 0 0 1px; 
     list-style-type: none; 
    } 
    ul{ 
     padding: 0 0 0 10px; 
    } 
    } 
    // *:nth-child(3n+1) { 
    // clear: both; 
    // } 
} 

而且在架構看起來如此（左其中i有紅色交叉）：

所以一切都是浮動的，但新的元素行只是在大多數最大高度塊之後，因爲在架構，但我需要的樣式，所以塊是浮動沒有最大高度塊排隊的心態，我怎麼能做到這一點，沒有js ？只有用CSS？

Answer 1

chekout這post

HTML

<div> 
    <a href="#">Whatever stuff you want to put in here.</a> 
    <a href="#">Whatever stuff you want to put in here.</a> 
    <a href="#">Whatever stuff you want to put in here.</a> 
</div> 

CSS

div{ 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    column-count: 3; 
    column-gap: 10px; 
    width: 480px; 
} 

div a{ 
    display: inline-block; 
    margin-bottom: 20px; 
    width: 100%; 
}