How to produce a 3-column list?
Solution 1
This is the simplest and most effective answer I've found:
http://www.communitymx.com/content/article.cfm?cid=27f87
To quote the site:
The HTML:
<ul>
<li>Antelope</li>
<li>Bison</li>
<li>Camel</li>
<li>Deer</li>
<li>Eland</li>
<li>Gazelle</li>
</ul>
The CSS:
ul {
float: left;
width: 12em;
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
width: 6em;
margin: 0;
padding: 0;
}
"If we want more columns we can widen the list and and add more list items"
Solution 2
CSS3 column
styles can be used on a list as well:
<ul class="group-list">
...
</ul>
.group-list {
-moz-column-gap: 20;
-moz-column-count: 3;
-webkit-column-count: 3;
-webkit-column-gap: 20;
column-count: 3;
column-gap: 20;
}
You can add Modernizr and this jQuery column plugin to support old versions of IE:
if (!Modernizr.csscolumns) {
$('.group-list').makeacolumnlists({cols: 3, colWidth: 240, equalHeight: false, startN: 1});
}
PPK has a good article on CSS3 column support in browsers, and caniuse.com has a page on CSS3 Multiple column layout too.
Related videos on Youtube
DaveDev
Updated on April 26, 2022Comments
-
DaveDev about 2 years
I have to produce a 3-column list of items similar to what can be seen for the different groups (mostly banks and financial institutions) at this page:
http://funds.ft.com/FundDirectory.aspx (even though these are horizontally aligned divs)
I have all the items I need to add to the 3 columns in a
List<Group>
stored in myModel.Groups
object.I was thinking of taking an approach similar to:
<ul> <% foreach (var item in Model.Groups) { %> <li> <a href='<%=item.URL %>'> <%= Html.Encode(item.Name) %> </a> </li> <% } %> </ul>
but this will only generate a single-column list. Is there any way for me to produce a 3-column list with simple HTML/CSS or do I have to take a more dynamic approach, by e.g. creating 3 horizontally aligned lists, with the number of items per list depending on the total number of items in
Model.Groups
/ 3?Or is there a smarter way for me to approach this? I'm open to all suggestions. Thanks
-
J. K. almost 14 yearsI think they kind of are. I think that you should be able to use the CSS property on the list.
-
Kestrel12 about 8 yearsThis has the disadvantage that it will order the items across instead of down, which is not how most people read a columned list.