CSS3多列

Question

我使用CSS創建多列，給類似的看樣到Pinterest的界面（例如盒列，但整齊堆疊彼此的下面）。

下面是我使用的代碼：

#feed-post-home .feed { 
    -moz-column-count:3; /* Firefox */ 
    -webkit-column-count:3; /* Safari and Chrome */ 
    column-count:3; 
} 

#feed-post-home .feed > section { 
    margin-bottom: 10px; 
} 

#feed-post-home .feed > section > .content { 
    background: #d4d4d4; 
    padding: 10px; 
} 

正如你可以在下面的圖片中看到，這幾乎作品完美：

但仔細觀察，你可以看到一些箱被分成兩中，我強調我的問題，接下來的圖像中，橙色矩形顯示哪個盒子應該是一個，而不是兩個是分裂：

有誰知道什麼（如果有的話），我可以添加到我的CSS，以防止元件被以這種方式分裂？我寧願他們只是堆疊彼此下方爲整個元素，即使最終的結果看起來有點不平衡

Answer 1

由於在複製後顯示，你需要做的：

#feed-post-home .feed > section { 
    margin-bottom: 10px; 
    -webkit-column-break-inside: avoid; /* Chrome webkit browsers */ 
    page-break-inside: avoid;    /* FF */ 
    break-inside: avoid-column;   /* Convention */ 
} 

你可以還設置了顯示爲inline-block防止斷裂。

#feed-post-home .feed > section { 
    margin-bottom: 10px; 
    display: inline-block; 
}