重新设置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; 
} 

但是，它并没有给我我想要的，因为当页面改变大小，列下对方去，这绝对是不好的。有没有什么办法可以让列（divs）换行来占用任何空格，但是如果页面变得太小，那么每个div应该由一列组成，并且应该有水平滚动。

从本质上说，我有2个问题：

1）我不想的div去对方的下方时，页面大小调整BUT 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>