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

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

你需要列数或mansonry 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/