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

我以为我昨天回答了这个问题。你需要使用浮点数：从.blackData和.listData样式中删除，并在.listData样式中添加填充底部。 20px似乎工作。在确定要发送到下一列的内容时，列正在检查内容（而不是背景），并通过在.listData的底部添加填充，使内容与背景的大小相同。

另外，在你的jsfiddle上你有2次.blockData样式，所以你需要把它们中的一个拿出来。

如果你想使列以主要内容div为中心，你将需要取消位置：#mainContent的绝对样式并将.blockData边距从5px 0px更改为5px auto。通过将自动添加到边距，您将自动将内容居中。我还建议将保证金从.blockData的顶部取下，只将其放在底部，这样所有列都将对齐到顶部。

现在，当您从#mainContent取消绝对定位时，您将能够使块居中，但它不会重新调整并将一个块发送到下一列，但会使每列中的块数均匀（即，而不是在第一个中有7个而在第二个中有1个，它将在第一个中具有4个而在第二个中具有4个）。这实际上取决于您希望如何显示它。

我也修好了你的jsfiddle。只需转动位置：绝对关闭和开启#mainContent，你就会看到我在说什么。

修改

而不是使用padding bottom来防止切断每个背景，你可以使用display：.blockData上的inline-block（这类似于column-break-inside：在这种情况下避免但适用于所有浏览器）。