html - 如何制作从一列流到下一列的高度未定义的多列布局？

Question

我有一个包含任意数量列表的单列布局，每个列表都有任意数量的列表项。在某个断点处，我希望该布局变成两列，但没有告诉任何这些列表去哪一列 - 它应该只是流动。然后，第三个断点会将布局分成三列。

要求:

• 相同的、未更改的标记需要跨断点工作
• 没有javascript
• 列表没有固定高度
• 保存列表的父容器没有固定高度
• 不通过任何类型的选择器区分列表

我尝试过的事情:

• Flexbox - 与此最接近，但它需要一个固定高度的父容器才能将列表推送到第二列和第三列，否则它们会在第一列中无休止地向下流动。

• 网格布局 - 需要各种选择器来指示元素应该放在哪一列。

其他解决方案违反了要求。我没有添加代码，因为代码实际上由一系列匿名的无序列表组成。

这是我对 Flexbox 的看法:http://jsbin.com/mabigisu/1/edit

取消注释高度表明它适用于固定高度，这是我不能拥有的，并且没有办法限制列数。

Answer 1

这件衣服怎么样？

它主要基于 this Pinterest 类似于 Kushagra Agarwal 的解决方案。不利的一面是它确实需要包装 div (.wrapper) 以及父

CSS ......

.wrapper {
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
}
.parent {
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-gap: 15px;
    column-fill: auto;
}
ul {
    display: inline-block;
    background: #fff;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    width:100%;
    margin:5px;
}
ul li, h5 {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
    list-style-type:none;
}
@media (min-width: 420px) {
    .parent {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}
@media (min-width: 768px) {
    .parent {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}
@media (min-width: 960px) {
    .parent {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}
@media (min-width: 1100px) {
    .parent {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

这是一个 fiddle http://jsfiddle.net/KqygU/1/