在多列中按字母顺序列出固定数量的项目

Question

我有一个项目列表，我想在三列中按字母顺序（从上到下）均匀显示。是否可以仅使用css进行管理？

使用下面的示例代码，三列将包含以下数量的项目：3/3/2。

<div class="content">
  <div class="list_container">
    <div class="list_item">Adis Abeba</div>
    <div class="list_item">Amsterdam</div>
    <div class="list_item">Beijing</div>
    <div class="list_item">Buenos Aires</div>
    <div class="list_item">Johannesburg</div>
    <div class="list_item">Mexico City</div>
    <div class="list_item">Paris</div>
    <div class="list_item">Stockholm</div>
  </div>
</div>

演示：http://jsfiddle.net/BERSp/1/

Answer 1

您需要列计数或砌体javascript： http://jsfiddle.net/BERSp/2/

.content {
    width: 500px;
    border:1px solid #111;
    padding: 10px;
}
.list_container {
    overflow:hidden;
    -webkit-column-count:3;
    -moz-column-count:3;
    -o-column-count:3;
    column-count:3;
}

Javascript有用：http://masonry.desandro.com/

Answer 2

对于3列，只需将宽度设置为33％：

.list_item {float:left; display: block;width:33%}