CSS3列背景截止

Question

我想使用CSS3列從上到下排列一些div，然後從左到右。它似乎工作得很好，但我有這個問題如下圖所示。我爲每個div都提供了一個背景，當我調整窗口的高度時，不是像我想的那樣將整個背景移動到一個塊中，而是逐漸添加它，將兩列之間的背景分開。這看起來真的很糟糕。我想知道是否有辦法保留我的div背景，這樣一旦窗口變得太小而無法容納div的一個像素高度，它就會將整個div移動到下一列。

其次，我想在窗口大小的頁面中心列的中心。我想這在Chrome（任何最新版本），Firefox（所有最新版本）的工作，和IE 10

您可以在這裏搗鼓：http://jsfiddle.net/eE3z6/

#mainContent /* The containing div */ 
{ 
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    margin: 10px; 
    column-width: 400px; 
    -webkit-column-width: 400px; 
    -moz-column-width: 400px; 
} 

.blockData /* The divs inside are all of this class */ 
{ 
    position: relative; 
    width: 380px; 
    height: 30px; 
    padding: 4px; 
    margin: 0px 0px 10px 0; 
    border: 4px outset grey; 
    background: lightgrey; 
} 

Answer 1

就在添加-webkit-column-break-inside : avoid;和display : inline-block爲.blockData

演示：http://jsfiddle.net/eE3z6/4/

Answer 2

我想我回答這個昨天。您需要使用float：left .blackData和.listData樣式，並將填充底部添加到.listData樣式。 20px似乎工作。當決定發送到下一列的內容時，列正在檢查內容（而不是背景），並且通過向.listData的底部添加填充來使內容與背景具有相同的大小。

另外，在你的jsfiddle中你有.blockData樣式有2次，所以你需要把它們中的一個取出來。

如果您希望使列能以主內容div爲中心，則需要取消位置：從#mainContent取得絕對樣式並將.block數據邊距從5px 0px更改爲5px auto。通過將自動添加到邊距，您將自動將內容居中。我也建議從.blockData的頂部取下保證金，並且只將其放在底部，以便所有的列都對齊頂部。

現在，當您從#mainContent中取消絕對定位時，您將能夠將塊居中，但不會重新調整並將一個塊發送到下一列，但會平均每列中的塊數（即不是在第一個中有7個，在第二個中有1個，第一個中將有4個，第二個中有4個）。這取決於你希望如何顯示它。

我也修好了你的jsfiddle。只需轉動position：absolute off並開啓#mainContent，你就會看到我在說什麼。

編輯：

，而不是使用-填充底部以從切斷各背景可以使用顯示保持：在.blockData內聯塊（這類似於柱斷裂-內：避免這種情況下，但適用於所有瀏覽器）。