views:

36

answers:

3

I'm looking for a jquery plugin or javascript that will columnize a list. I've seen Columizer, which is great and the configuration options are just what I need, except that it doesn't columnize data in the direction I need.

My list:

1. 2. 3. 4. 5. 6. 7. 8. 9.

Columizer behavior I want:

1. 2. 3.
4. 5. 6.
7. 8. 9.

Columizer behavior I don't want:

1. 4. 7.
2. 5. 8.
3. 6. 9.
+3  A: 

You don't need a jQuery plugin for that. Simply set the float property for the <li>s:

li {
    float: left;
}

Here's an example: http://jsfiddle.net/FgZ9N/

Dave
A: 

If you mean displaying list items in that fashion, no scripting is requried. setting a width on each list item, giving the list container element a width equal to the total columns, and using 'float:left' should do the trick

Moin Zaman
Because the listed items are of variable height, when I float them one item will occasionally get "caught" beneath a short item above it, causing a row with only one item in it. To fix this I've used display:table cell but that isn't ideal.
Tom
how about setting clear:both on every last list item in a row? either while generating server side or using nth-child property?
Moin Zaman
display:inline-block seems to work the best.
Tom
A: 

You could probably achieve this with CSS.

Assuming the list is in < ul>< li> format:

{
  display:inline-block;
  width:33%;
}

or use float:left; and then set clear:all; on every third one.

or something like that -- there's probably about a dozen ways to do this in CSS.

Spudley