從上到下排序列表，而不是從左到右

我有一個固定寬度&高度的div。我需要一個從上到下的列表，當有空閒的房間會向右走。列表工作的常規方式是從左到右，當寬度沒有空間時，會出現換行符並繼續...從上到下排序列表，而不是從左到右

原因很簡單，我需要按ABC排序列表，像：

A B 
ABC BCD 
ABD BCE

相反的：

A ABC ABD 
B BCD BCE

HTML結構：

<ul class="lists" id="practice"> 
    <li><a href="">Arbitration &amp; Mediation</a></li> 
    <li><a href="">Banking &amp; Finance</a></li> 
    <li><a href="">Capital Markets</a></li> 
    <li><a href="">China Desk</a></li> 
    <li><a href="">Class Actions &amp; Derivative Suits</a></li> 
    <li><a href="">Competition &amp; Antitrust</a></li> 
    <li><a href="">Environmental</a></li> 
</ul>

來源

2014-01-21 Rafael Mor

如果你正在排序「列表」，那麼表格可能會更好。 –

你可以提供一些代碼或任何其他的視覺？ – otinanai

列，我會說。參見[MDN頁面]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts）瞭解更多關於該主題的內容。請注意，列不支持很好，但是。 –

年輕的瀏覽器，您可以使用第n個孩子和使用結構漂浮或列數/寬/ ...

DEMO：http://codepen.io/anon/pen/ifqlz

ul, li { 
    padding:0; 
    margin:0; 
    width:30em; 
    margin:auto; 
} 
hr { 
    clear:both 
} 
li {overflow:hidden;width:15em;} 
.lists li { 
    float:left; 
    clear:left; 
} 
.lists li:nth-child(4) ~ li{/* here cause 7/2 (round up/math.ceil()) is 4 */ 
float:none; 
    clear:none; 
} 
.listsbis { 
    column-count:2; 
    column-gap:0; 
    column-width:15em; 
}

爲舊版瀏覽器，你將需要JavaScript或腳本像砌體。 http://masonry.desandro.com/

來源

2014-01-21 15:29:13

您可以參考JavaScript中的腳本來支持舊版瀏覽器嗎？謝謝。 –

在谷歌搜索石工，你會發現着名的:) http://masonry.desandro.com/ –

我已經下載並安裝砌體在哪裏是從上到下開始的選項？ –

從上到下排序列表，而不是從左到右

回答

相關問題