4

我正在尝试使用列进行响应式布局，但在某些情况下，它们的数量正在变化。我已经设置column-count:3了，但是当我有 4 个 div 时，它们的位置是 2x2 而不是 3x1。

当我有 7 列时会发生同样的错误，依此类推。

#content {
    width: 980px;
    height:1000px;
    position:relative;
    margin: 0 auto 0 auto;
    background-color:white;
    max-width: 980px;
}

#columns {
    font-size:1em;
    -webkit-column-count: 3;
    -webkit-column-gap: 0.625em;
    -webkit-column-fill: balance;
    -moz-column-count: 3;
    -moz-column-gap: 0.625em;
    -moz-column-fill: balance;
    column-count: 3;
    column-gap: 0.625em;
    column-fill: balance;
}

.news {
    margin-bottom:0.938em;
    display: inline-block;
    background: blue;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 0.625em;
}

.newsheader {
    width:100%;
    padding-bottom: 0.75em;
}
<div id="wrapper">
    <div id="content">
        <div id="columns">
            <div class="news">
                <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span>
            </div>
            <div class="news">
                <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span>
            </div>
            <div class="news">
                <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span>
            </div>
            <div class="news">
                <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span>
            </div>
        </div>
    </div>
</div>

这是一个 JSFiddle 演示：http: //jsfiddle.net/BmG44/

4

3 回答 3

3

平衡柱

这是我在 FF、Chrome 和 Opera 中观察到的行为：

1 element:    1 0 0
2 elements:   1 1 0
3 elements:   1 1 1

4 elements:   2 2 0   (expected: 2 1 1)
5 elements:   2 2 1
6 elements:   2 2 2

7 elements:   3 3 1   (expected: 3 2 2)
8 elements:   3 3 2
9 elements:   3 3 3

对于 4 和 7 个元素，浏览器选择平衡前 2 列，而不是将元素分散到尽可能多的列中。

元素的顺序

列平衡时按顺序填充。换句话说，如果将 8 个元素添加到 3 列，则这些列将被填充，如下所示：

1    4    7 
2    5    8
3    6

...而不是像这样：

1    2    3 
4    5    6
7    8

演示（在 FF、Chrome、Opera 中测试）

于 2013-02-24T16:44:12.147 回答
0

您只是没有足够的内容来制作第 3 列。添加更多新闻元素，第三个出现：

http://jsfiddle.net/BmG44/10/

该规范有这样的说法column-count：

描述了元素内容将流入的最佳列数。值必须大于 0。如果 'column-width' 和 'column-count' 都具有非自动值，则整数值描述最大列数。

http://www.w3.org/TR/css3-multicol/#column-count

我可以看到分阶段中没有任何内容表明指定 3 列意味着您将获得 3 列。如果不是得到 2 列内容和 1 个空列，而是得到 2 列并且没有空白空间，那就太好了。

此外，避免中断的正确属性名称是break-inside，尽管一些浏览器仍然接受column-break-inside（我认为 Webkit 根本不尊重新名称）。

于 2013-02-24T15:54:41.413 回答
0

我对五个元素的列表有同样的问题。以防万一有人需要它，解决这个问题的一个丑陋的技巧是计算列表的元素，如果它们是五个，在第四个元素之后添加一个额外的空项目。

于 2018-08-14T16:13:02.720 回答