我的网页有一个’skinny’列表：例如，一个100个项目的长度一个单词的列表。为了减少滚动，我想把这个列表呈现在两个甚至四列的页面上。我应该怎么做这个与CSS？
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
我喜欢解决方案是灵活的，所以如果列表增长到200项，我不需要做很多手动调整来适应新的列表。
解决方法
CSS解决方案是：
http://www.w3.org/TR/css3-multicol/
浏览器支持正是你期望的。
它工作“无处不在”，除了Internet Explorer 9或更旧版本：http://caniuse.com/multicolumn
ul {
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;
}
如果需要IE支持，则必须使用JavaScript，例如：
http://welcome.totheinter.net/columnizer-jquery-plugin/
另一个解决方案是回退到正常浮动：仅为IE。顺序将是错误的，但至少它看起来类似：
<!--[if lt IE 10]>
<style>
li {
width: 25%;
float: left
}
</style>
<![endif]-->
如果你已经在使用它，你可以应用这个备用Modernizr。
