0

I have a list of items that I want to display evenly in alphabetic order (from top top to bottom) in three columns. Is it possible to manage this with css only?

With the example code below the three columns would contain following amount of items: 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>

Demo: http://jsfiddle.net/BERSp/1/

4

2 回答 2

6

You need column-count or 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 usefull : http://masonry.desandro.com/

于 2013-07-12T16:34:07.197 回答
1

For the 3 columns, just set width to 33%:

.list_item {float:left; display: block;width:33%}
于 2013-07-12T16:12:32.920 回答