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

我有一个固定宽度&高度的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/ –

我已经下载并安装砌体在哪里是从上到下开始的选项？ –

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

回答

相关问题