如何在css中创建三列 [英] How to create three columns in css

问题描述

如果我有一个对象列表，如List myObjects;并且列表中可能有2,20,50等项。

If I have a list of objects such as List myObjects; and there might be 2, 20, 50 etc items in the list.

我想要的是能够通过列表进行迭代，并构建一个3列视图项目使用CSS布局列。

What I want is to be able to itterate through the list and build a 3 column view of the items using css to layout the columns.

如何做到这一点？我不想做一个循环，其中每三个项目我再次从1开始或者是唯一的方式？

How do I do this? I don't want to do a loop where every three items I start at 1 again or is that the only way?

我可以简单地循环项目，对象转换成div，并让列建立自己？

Can I simply loop through the items, place each object into a div and have the columns build themselves?

推荐答案

如果顺序无关紧要， c $ c> ul ，然后使用 ul 的1/3的宽度创建列表项的无序列表，

If order doesn't matter, then put them in a ul of fixed width, and then create the unordered list with the list items at 1/3 of the ul's width and floated left.

因此

.three-column{
 width: 300px;
}

.three-column li {
 float: left;
 width: 100px;
}

然后坚果

查看：
http://www.alistapart.com/articles/multicolumnlists /

这篇关于如何在css中创建三列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！