CSS3列，如果小寬度減少數字

是否可以使用具有最小列寬度的CSS3列;如果容器的大小調整爲小於當前的列數，那麼列數會減少？CSS3列，如果小寬度減少數字

例如，這個HTML http://jsfiddle.net/3LStR/。有3列。如果.cols3 div的寬度低於400px，我希望將其轉成兩列;

我找到了這個參考：http://www.w3schools.com/cssref/css3_pr_column-width.asp但這沒有幫助。

我想三列，如果總寬度允許此，

<----------------------------------> 

<-------><-------><------->

但如果總寬度更小，我想少列：

<-----------------------> 

<-------><------->

而且

<---------------> 

<------->

如果總寬度更大，我仍然只需要三列：

<------------------------------------------------------------> 

<-------><-------><------->

來源

2013-11-15 RobAu

我們是在討論一個動態調整大小的容器在您的網頁上或視口（屏幕）的大小？ – ElGavilan

假設您可以基於窗口寬度的列而不是特定的容器，這就是Media Queries派上用場的地方。

給你的容器width:100%，然後設置一個max-width你希望它停止拉伸的地方，在這種情況下爲600px。

.cols3 { 
    width: 100%; 
    max-width: 600px; 
}

包裝你列設置在媒體查詢你想要的列開始顯示的最小寬度（400px）：

@media (min-width: 400px) { 
    .cols3 { 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    -webkit-column-rule: 1px solid #000; 

    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -moz-column-rule: 1px solid #000; 

    column-count: 2; 
    column-gap: 20px; 
    column-rule: 1px solid #000; 
    } 
}

最後，設置你的最後一個斷點的最大列數你想你想（600px）合適的尺寸：

@media (min-width: 600px) { 
    .cols3 { 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
    } 
}

舉例：http://jsfiddle.net/shshaw/A6vjv/show/

代碼：http://jsfiddle.net/shshaw/A6vjv/

再次，這是基於窗口的寬度，而不是實際的容器寬度。您可能需要根據容器的樣式和文檔中的位置進行調整。否則，你需要一些花哨的JavaScript來基於容器單獨做斷點。

來源

2013-11-15 22:42:32 shshaw

CSS3列，如果小寬度減少數字

回答

相關問題