0

CSS を使用して複数の列を作成し、Pinterest インターフェイスに似たような外観を与えています (たとえば、ボックスの列ですが、互いにきちんと積み重ねられています)。

私が使用しているコードは次のとおりです。

#feed-post-home .feed {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

#feed-post-home .feed > section {
    margin-bottom: 10px;
}

#feed-post-home .feed > section > .content {
    background: #d4d4d4;
    padding: 10px;
}

下の画像でわかるように、これはほぼ完全に機能します。

ここに画像の説明を入力

しかし、よく調べてみると、いくつかのボックスが 2 つに分割されていることがわかります。次の画像で問題を強調しています。オレンジ色の四角形は、2 つに分割されているのではなく、1 つにすべきボックスを示しています。

ここに画像の説明を入力

このように要素が分割されるのを防ぐために、CSSに何を追加できるか(もしあれば)知っている人はいますか? 最終結果が少し不均衡に見えるとしても、要素全体として互いの下に積み重ねられたほうがいいです

4

1 に答える 1

2

複製された投稿に示されているように、次のことを行う必要があります。

#feed-post-home .feed > section {
    margin-bottom: 10px;
    -webkit-column-break-inside: avoid;   /* Chrome webkit browsers */
    page-break-inside: avoid;             /* FF */
    break-inside: avoid-column;           /* Convention */ 
}

inline-blockブレークを防ぐように表示を設定することもできます。

#feed-post-home .feed > section {
    margin-bottom: 10px;
    display: inline-block;
}
于 2013-09-05T16:52:44.403 に答える