开发者

How to break up an HTML List using CSS Only

I would like to create a list that adds columns as necessary depending on how many list elements are present. Currently I only know how to do this using a table, which I would like to avoid. Is there a 开发者_开发知识库way to do this using CSS only?

I have created an example of how I currently do it with tables on JSFiddle.net ...

http://jsfiddle.net/9W33K/


There is a pretty thorough (albeit a bit older) guide I've looked at before here: CSS Swag: Multi-Column Lists


There's two ways I can think of that you can go about it.

  1. Use Floats
  2. Use CSS3 Columns

With floats you will get a pattern like this:

Item 1 Item 2
Item 3 Item 4

With CSS3, you don't get very much browser support (no IE support until IE10).

Fiddle with both examples: http://jsfiddle.net/DThhT/1/


You can mimic a HTML table using css display:table property. You'll be able to replace those <tr> and <td> with <div>.

More info here: http://www.w3.org/TR/CSS2/tables.html#table-display

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜