重新設置CSS中的限制列

所以我有一個奇怪的問題。這是我的so far。在jfiddle中，有3列單詞，但實際上，我將介於2和5之間。問題是列可能很長，但寬度很短。我想要的是能夠使用列的其餘空白區域。我讀this guide這給了我一些建議，我增加了以下內容列的div：重新設置CSS中的限制列

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

但是，它並沒有給我我想要的，因爲當頁面改變大小，列下對方去，這絕對是不好的。有沒有什麼辦法可以讓列（divs）換行來佔用任何空格，但是如果頁面變得太小，那麼每個div應該由一列組成，並且應該有水平滾動。

從本質上說，我有2個問題：

1）我不想的div去對方的下方時，頁面大小調整BUT 2）如果有空白，我想的div分裂並佔據那個空的空間。

有沒有人有任何建議？謝謝！

來源

2015-03-03 thatandrey

，你可以看到，如果使用列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>

來源

2015-03-03 00:51:56

謝謝對，我只需要列寬，但當頁面調整大小時，或者列數過多時，列仍然在彼此的下面，這是我想要避免的全部成本，因爲每列中的內容與另一列中的內容大不相同列。 – thatandrey 2015-03-03 00:54:43

@thatandrey然後，你可以做一個混合的內聯boxe和列：http://jsfiddle.net/jm0kres4/4/ http://jsfiddle.net/GCyrillus/jm0kres4/6/ – 2015-03-03 01:05:00

謝謝！這是非常接近我想要的！唯一的問題是，當您調整頁面的大小以使其非常小時，這些列將會在彼此之下。有什麼辦法可以防止這種行爲？ – thatandrey 2015-03-03 01:12:31

重新設置CSS中的限制列

回答

相關問題