html - 如何创建 'responsive' 列表 : creating multiple columns to fit available width?

Question

在我以前的固定宽度的世界里，我可以采用可变的 X # 元素，除以三并将数据相当有效地分布在三列中:

在这个新奇的响应式世界中，我提出的(到目前为止)最好的解决方案是将数据分成固定大小的桶(比如 5 个)，然后让分块列表向左浮动:

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

我目前使用的是 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使用媒体查询更新，使屏幕宽度 <= 420px

上的 3 列变为 1 列