如何在CSS中浮動div？

Question

我在HTML中有這個列表，我想按列排序。我嘗試使用花車它給了我這樣的：

編輯： 身高這些<li>的是不確定的，但我想下面C B，E低於E和G F下述不改變結構，改變順序。我不想絕對使用位置。我想知道是否有其他解決方案。

HTML：

<ul> 
    <li class="item">A</li> 
    <li class="item">B</li> 
    <li class="item">C</li> 
    <li class="item">D</li> 
    <li class="item">E</li> 
    <li class="item">F</li> 
    <li class="item">G</li> 
<ul> 

OUTPUT（使用float: left; width: 240px; border-left: 1px solid #EEE）：

我想要什麼更像是這個下面，不改變HTML因爲我已經使用這個st做出迴應。

這可能嗎？

Answer 1

您可以在第一個LI標記like this上使用列CSS和頁邊距。

ul { 
    column-count:4; 
    padding:0; 
    column-rule: solid lightgray 1px; 
} 

li { 
    display:inline-block; 
    width:100%; 
} 

li:before {/* demo purpose to set an height to lis */ 
    content:''; 
    float:left; 
    padding-top:50%; 
} 

li:first-of-type { 
    margin-bottom:50%; 
} 

您可能需要JavaScript前綴或手動添加供應商前綴。