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）如果有空白区域，我希望分裂并占用那个空白区域。

有没有人有任何建议？谢谢！

Answer 1

你可以看到使用CSS列是否足够好而只设置了colums的宽度:(运行下面的代码片段或this fiddle）

＆＃13;

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

＆＃13;

<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>

＆＃13;

重新调整CSS中的限制列

1 个答案: