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..
You messed with type document.getElementsByClass("circle") is Nodelist (object like array). so you should loop through it, or use document.getElementsByClass("circle")[0].style.background-position="0 -56px"; to loop through you need var circles=document.getElementsByClass("circle") for (var...
It doesn't work for desktop too! Make your browser window very small and you will see the horizontal scrollbar. The width is always fixed. To avoid this behavior, use the...
Don't try to make the area represented by the red lines in your diagram a single element. For each block: Set the background on a full width element. Put a...
You may need this: .image_carousel { margin-top: 20px; box-shadow: 0px 0px 3px #000; } .image_carousel img{ float:left; width: 60px; } .image_carousel p{ float:left; } .clear { clear: both; } <div...