如何创建“响应式”列表：创建多个列以适应可用宽度？

Question

在我原来的固定宽度世界中，我可以采用变量X＃元素，除以3并相当有效地将数据分布在三列中：

在这个新的响应式响应世界中，我提出的最佳解决方案（到目前为止）是将数据拆分为固定大小的存储桶（比如5），然后让分块列表向左浮动：

当你有一个非常长的列表时，这很有效，但是当你有一个小列表时 - 有很多水平像素可能会被浪费掉。如果其中一个元素最终为SUPER long / wide，它也可以很好地工作，它可以有效地将下一组列表推到它下面。

我目前正在使用Bootstrap3，但为此开放了纯CSS解决方案。

是否有很好的方法可以执行响应式多列列表（优化设备上的可用宽度）

Answer 1

如果您只连续生成3个响应列，该怎么办：

编辑：添加媒体查询以生成3列1列

jsFiddle

<div class="outer">
    <div class="inner1">Hello</div>
    <div class="inner2">World</div>
    <div class="inner3">!</div>
</div>

.outer {
    width: 100%;
}
.inner1 {
    clear: both;
    float: left;
    display:inline-block;
    width: 32%;
}
.inner2 {
    display:inline-block;
    width: 32%;
    margin-left: 2%;

}
.inner3 {
    display:inline-block;
    width: 32%;
    margin-left: 2%;
}

@media only screen and (max-width: 420px) {   /* small mobile sizes */

.inner1, .inner2, .inner3 {
    display:block;
    width:100%;
    }
}

This Fiddle使用媒体查询进行更新，该查询使3列成为屏幕宽度上的1列＆lt; = 420px