CSS3 列背景截止

Question

我正在尝试使用 CSS3 列从上到下然后从左到右对一些 div 进行排序。它似乎工作得很好，但我有一个问题，如下图所示。我给每个 div 一个背景，当我调整窗口的高度时，它不会像我希望的那样将整个背景移动到一个 block 中，而是逐渐添加它，将背景分隔在两列之间。这看起来真的很糟糕。我想知道是否有一种方法可以保留我的 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

只需为 .blockData 添加 -webkit-column-break-inside : avoid; 和 display : inline-block

演示地址:http://jsfiddle.net/eE3z6/4/