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 回答