How to layout list items in groups


Tags: html,css,css3

Problem :

Let's say we have a html list like this:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ...
    <li>10</li>
</ul>

How to, using css and/or java script, make a browser show it like this (in groups of four, with some margin between the groups):

1 2    5 6    9 10
3 4    7 8    


Solution :

you can use css3 column-count property for this:

Write like this:

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
    -webkit-column-width:20px;
    -moz-column-width:20px;
}
li {
    display:inline;
}
div{
    width:120px;
}

Check this http://jsfiddle.net/rJTGJ/2/


    CSS Howto..

    How to remove top border for one element in a list

    How to make a function set css width with a JavaScript variable?

    How to draw a circle css

    How to find which CSS files are used for current page

    How to apply dynamic CSS for the label in IE7

    How do I take multiple CSS files with the exact same selectors and force one to be used only on a specific div?

    how to avoid firefox to add overlay color on image click?

    How to achieve cellpadding with divs or likeiwse?

    css. How to write (code) css for different window widths?

    How to Fix text in Html with CSS

    How to get the last Element of CSS?

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How to download Jquery if link only shows source code and connect it to my html

    rails redirect_to notice - how to apply css

    How to fix background Opacity css

    How to make horizontal division using html div tag and css

    How to make CKEditor render text with a CSS?

    How to reduce width of div using JQuery, CSS so that the left section is reduced and not the right?

    How to use jQuery to horizontally center an object in the viewport?

    How to style a dynamic html created by PHP

    How can I change the css properties of a google visualization table and it columns?

    How to re-animate CSS3 animations on class change

    Unicode down triangle doesn't show up in IE9

    How can a

    How to use pseudo-class :target within an image map

    How to avoid calling “fonts.googleapis.com/css?family=..” for my CSS files

    How to design aggregations filter in css for week, month?

    How to do a 'soft' release of features/refactoring in CSS?

    Using a lot of style sheets. Needing opinions on how to move forward efficiently

    How to minimize the number of CSS classes created?