html - 使用 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 是否仅设置列的宽度就足够了:(运行下面的代码片段或 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>