css - 分两栏列出

Question

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

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

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

虽然它在 4 件元素和 1 件元素到达它们的位置时工作，但令我惊讶的是当有 3 件时，我可以假设有 5、7 ......，“备用”的放在右边

我不明白。我想避免在检查每个元素并决定它应该向右还是向左的 View 中进行额外的计算(我知道这没什么大不了的，但如果我能避免它我认为会更干净)

Answer 1

尝试 CSS 多列布局

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