列在两列中

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%;
}