在 CSS 中使用限制调整列的大小

Question

所以我有一个奇怪的问题。这就是我所拥有的so far。在 jfiddle 中，有 3 列单词，但实际上，我会在 2 到 5 之间。 问题是列可以很长，但宽度很短。我想要的是能够将其余的空白用于列。我阅读了this guide，它给了我一些建议，我在列 div 中添加了以下内容：

div {
  -webkit-columns: 2 200px;
  -moz-columns: 2 200px;
  columns: 2 200px;
float:left;
}

但是，它并没有给我我想要的东西，因为当页面改变大小时，列会相互向下，这绝对是坏事。有什么办法可以让列（div）换行以占据任何空白，但是如果页面变得太小，那么每个 div 应该由一列组成，并且应该有水平滚动。

本质上，我有两个问题：

1)当页面调整大小时，我不希望 div 彼此位于下方 2）如果有空白，我希望 div 拆分并占用该空白空间。

有人有什么建议吗？谢谢！

Answer 1

您可以通过仅设置列的宽度来查看使用列 CSS 是否足够好：（运行下面的代码 sn-p 或 this fiddle）

section {
    padding: 1em;
    -moz-column-width:5em;
    -webkit-column-width:5em;
    column-width:5em;
}
span {
    display: block;
    width: 5em;
}

<section>
    <div><span>column a</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>last word</span></div>

    <div><span>column b</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>last word</span></div>

    <div><span>column c</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>last word</span></div>    

  
</section>