css - 分两列列出

Question

我试图在两列中显示一个列表。我的想法是避免使用桌子。

div #DocumentList .Preview {
    float: left;
    width: 50%;
    padding-bottom: 10px;
    position: relative;
}

并将每个项目放在容器 div 中的这些 div 之一中。

我虽然它正在工作，因为 4 个项目和 1 个项目来到了他们的位置，但令我惊讶的是，当有 3 个时，我可以假设 5、7 ......，“备用”一个向右

我不明白。我想避免在视图中检查每个项目并决定它应该向右还是向左进行额外的计算（我知道这没什么大不了的，但如果我可以避免它，我认为会更干净）

谢谢！

Answer 1

试试css3

div {
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

http://www.w3schools.com/css3/css3_multiple_columns.asp

Answer 2

对于 IE 8 或更高版本（当然，所有其他浏览器）

.item{
    display: inline-block;
    width:49%;
}