如何在固定高度的div中垂直换行

Question

Note: I don't think that the I have worded the question the best possibly way. Feel free to edit the title if someone has a better wording for the question that I am trying to ask.

---

Lets say we have a div that has some fixed height (and width).

Once the divs' height increases, a scroll bar will appear. Instead of the scrollbar, I want text to go into the next 'column' of sorts.

Example:

A1          A1 A6
A2          A2 A7
A3          A3 A8
A4    =>    A4 A9 
A5          A5
- - - - - - - - - - - <-- where our fixed height is set.
A6          
A7          
A8          
A9          

Thankfully for us (i think), the text is actually an unordered list like below.

<ul>
 <li><a href="">A1</a></li>
 <li><a href="">A2</a></li>
 ...
</ul>

So I am basically making a carousel with text which would have about 16rows in a column. Is there a direct way to make the text just go to the right once its finished with its available height or will I have to parse the list using javascript, break it into divs and then float them all? I am going to be using anchors based on the first letter of the text (A, B, C..) to scroll left/right.

Any help will be appreciated. Thanks!

EDIT: Is there something that would work for IE8+ (possibly degrade gracefully for IE6/7), Safari, Chrome and Firefox? I always forget to add various browsers to the question.

Answer 1

This can be done using CSS3 columns quite easily. Here's an example, HTML:

<ul id = "limheight">
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
</ul>

CSS:

#limheight {
    height: 300px; /*your fixed height*/
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li {
    display: inline-block; /*necessary*/
}

And a little demo: little link .

Hope that helped!

Answer 2

Not sure if I understood you correctly, but CSS has a column-property you might find useful. Read more about it here:

http://www.w3schools.com/css3/css3_multiple_columns.asp

Note: Does not work in <= IE9, so beware.