1

我正在尝试使用 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;
}

在此处输入图像描述

4

2 回答 2

2

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

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

于 2013-08-02T19:42:05.110 回答
-1

我以为我昨天回答了这个问题。您需要从 .blackData 和 .listData 样式中去掉 float:left ，并为您的 .listData 样式添加一个 padding-bottom 。20px 似乎有效。在决定将什么发送到下一列时，这些列正在检查内容（而不是背景），并通过在 .listData 的底部添加填充来使内容与背景的大小相同。

此外，在您的 jsfiddle 上，您有 .blockData 样式 2 次，因此您需要将其中之一取出。

如果你想让列以主要内容 div 为中心，你需要从#mainContent 中删除 position:absolute 样式，并将 .blockData 边距从 5px 0px 更改为 5px auto。通过将自动添加到边距，您将自动将内容居中。我还建议将 .blockData 顶部的边距去掉，只将其放在底部，以便所有列都与顶部对齐。

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

我也修复了你的jsfiddle。只需为#mainContent 关闭和打开 position: absolute ，您就会明白我在说什么。

编辑：

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

于 2013-08-02T19:39:47.100 回答