保持CSS3多列寬靜態

Question

我試圖創造條件，最容易被描述爲一個水平滾動Pinterest的佈局。

如，我會疊起來針對上一個項目，而不是擴大從上到下，它會從左到右。

到目前爲止，它看起來像CSS3多列屬性正是我想要的。唯一的問題是寬度是靈活的（儘管聲明列寬）。不同的瀏覽器窗口呈現不同大小的列

目前使用的：我的問題

.multicol { 
    -webkit-column-width: 150px; 
    -webkit-column-gap: 0; 
    height: 400px; 
    width: auto; 
} 

例（調整窗口看到寬度改變）：http://jsfiddle.net/pbg3r/4/

有沒有一種方法，以保持寬度固定的嗎？我只想要Xpx寬度的列，並且隨着更多內容的添加，頁面會根據需要進行水平擴展。 「所有長度值（在水平文本中，這些值是：'寬度'，'列寬'，'列間距'和'列規則值'）。w3規範說明保持其固定的唯一方法是」寬度'）必須指定。「

雖然我不知道如何給容器一組寬度，並保持不斷消耗水平的能力。即使我這樣做，它仍然不能保證設置的寬度。

任何方式保證Xpx的寬度爲每列？

感謝您的任何幫助。

Answer 1

一個可能的答案，不同的瀏覽器呈現不同大小的列您的問題很簡單。

對於您的.multicol css樣式，您已經爲webkit瀏覽器設置了樣式，就像上面一樣。由於-webkit（這是一個瀏覽器前綴）僅適用於webkit瀏覽器，因此您需要將每個瀏覽器前綴添加到相同樣式，以便在其他瀏覽器上正確顯示。

這是你應該讓你的樣式表的樣子：（你可以擺脫每個瀏覽器的風格之間的空間，如果你想）

.multicol { 

/*webkit*/ 
-webkit-column-width: 150px; 
-webkit-column-gap: 0; 

/*moz*/ 
-moz-column-width: 150px; 
-moz-column-gap: 0; 

/*opera*/ 
-o-column-width: 150px; 
-o-column-gap: 0; 

height: 400px; 
width: auto; 
} 

，這裏是一個更新的fiddle顯示您內容上正確webkit，firefox，或opera瀏覽器中查看時，（你可以添加樣式的Internet Explorer只需使用：-ms-）

還需要瀏覽器前綴添加到您有任何其他的風格在你的樣式表中設置。