在 CSS 中限制列的大小

Question

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

列中添加了以下内容

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

但是，它并没有给我想要的东西，因为当页面改变大小时，列会相互重叠，这绝对是糟糕的。有什么方法可以让列 (divs) 换行以占据任何白色 space，但是如果页面变得太小，那么每个 div 应该由一列组成, 并且应该有水平滚动。

本质上，我有两个问题：

1)我不希望 div 在页面调整大小时相互重叠但是 2) 如果有白色 space，我希望 divs 拆分并占用空 space.

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

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>

在 CSS 中限制列的大小

Re sizing columns with restriction in CSS

html

css

multiple-columns