0

Pinterest のようなcolumnレイアウトを作成しようとしている CSS のルールとの最初の接触があり、少し奇妙であることがわかりました。何か間違ったことをしているに違いありませんが、結果は期待どおりではありません。

まず、子要素の数に応じて、最後の列がほぼ完全に分割され (はい... 1 行目または 2 行目は問題ないかもしれません)、各要素は前の列の一番下に移動します。

次に、最後の行の下に奇妙で巨大なマージンが作成されます。どういうわけか、最後に別の隠し行があったようです（ありませんが）。

そして最後に、列が最初に埋められたようです。3 番目の要素は 3 番目の行に移動し、8 番目の要素は一番上にあります。

リスト内の要素の数に応じて、列は幅に関して問題なく埋められます (列は幅の 100% を埋めます)。

ああ、ルールを削除するcolumn-gapと、ページの下部のスペースが増えます!

常に幅 100% (で定義されているように N 行column-count) を埋め、セルを最初に左から右に挿入し、次に上から下に挿入する良い方法はありますか? CSS

#posts{         
        width: 100%;
        overflow: hidden;
        -webkit-column-count: 4;
        -webkit-column-gap: 1.875em; /* 30px */
        -webkit-column-fill: auto;
        -moz-column-count: 4;
        column-gap: 1.875em;
        -moz-column-gap: 1.875em; /* 30px */
        -moz-column-fill: auto;
        column-count: 4;
        column-fill: auto;
    }

.post{                  
    display: inline-block;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

HTML

<section id='posts' class='clearfix'>
    <div class='post'>
        <div class='top' style='background-image: url("http://lorempixel.com/400/300/sports/1")'></div>
        <div class='bottom'>
            <span class='title'>Lorem ipsum sit ament lorem lorem ipsum</span>
            <span class='date'>em 15/08/2014</span>
        </div>
        <span class='category'>Lorem ipsum</span>
    </div>
....
    </section>

エラーの例 (たくさんありますが、これcolumns-count: 4はリストに 6 つの項目が表示されます)

右の列が消えた！

4

1 に答える 1

0

multiple-columnsまだ完全にはサポートされていません。また、Chrome にはバグがあります。それを修正する方法はないと思います（私の知る限り）。ブラウザが修正するまで待つ必要がある場合があります。

#multicolumn を使用できますか?このリンクを確認してください

Chrome はコンテナの高さを誤って計算すると報告されており、マージンやパディングで壊れることが多く、前​​の列の下部に次の列の 1 ピクセルが表示されることがあります。

于 2015-02-27T08:04:59.993 に答える