CSS3 列を使用したカード ウォーターフォール レイアウトを実装するためのサンプル コード

この記事では、カード ウォーターフォール レイアウトを実現するための CSS3 列のサンプル コードを次のように紹介します。

成果を達成する

今日、カードのウォーターフォール レイアウトを実装する際に、カードの高さが異なっているという問題が発生しました。

最後に、CSS3 の列属性を使用してこのレイアウトを実装しましたが、非常に簡単でした (前回ウォーターフォール フローを記述したときに、JS を使用して実装したことを漠然と覚えています... 素朴でした)

効果は以下のとおりです。

関連プロパティ

1. column-count: 達成したい列の数。ここでは 2 列だけ必要です。
2. 列幅: 列の幅
3. 列間隔: 列間の間隔
4. break-inside:avoid: 子要素 (各カード) にこの属性を設定しないと、カードは切り捨てられ、別の列に表示されます。

発生した問題

1. 実装プロセス中に小さな問題が発生しました。カードの下の境界線が切れてしまうのです。
2. 子要素にoverflow:autoを設定することで解決しました

コード

       .ビデオカード{
            パディングトップ: 4rpx;
            列数: 2;
            列間隔: 18rpx;

            .カード{
                表示: インラインブロック;
                上マージン: 20rpx;
                幅: 326rpx;
                背景: #FFFFFF;
                ボックスシャドウ: 0 0 10rpx 0 rgba(0,0,0,0.10);
                境界線の半径: 14rpx;
                侵入：回避する;
                パディング下部: 20rpx;
                オーバーフロー:自動;
                }
        }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。