4

列を使用してレスポンシブ レイアウトを作成しようとしていますが、場合によってはその数が変化しています。設定しましcolumn-count:3たが、4 つの div がある場合、それらは 3x1 ではなく 2x2 に配置されます。

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列目を作成するのに十分なコンテンツがありません。さらにいくつかのニュース要素を追加すると、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 に答える