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

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 を応援していただければ幸いです。

<<:  Docker用国産イメージウェアハウスの使い方

>>:  ハイパーリンクAタグを学ぶ

推薦する

コード例を通してページ置換アルゴリズムの原理を理解する

ページ置換アルゴリズム: 本質は、限られたメモリをワイヤレス プロセスに対応できるようにすることです...

サーバー同時実行数の推定式と計算方法

最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...

jQueryはショッピングカートの完全な機能を実現します

この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...

CSS で 3D ブック効果を実装するためのサンプル コード

さっそく、レンダリングを見てみましょうソースコードは以下のとおりです <!DOCTYPE ht...

JavaScript を使用せずに HTML の a タグを無効にするには、純粋な CSS を使用します。

実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に...

MySQL の group by に関する簡単な説明

目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....

Dockerイメージ作成の完全なプロセス

目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...

VueはGraphVisを使用して無限に拡張された関係グラフを開発します

1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...

MySQL でローカル ユーザーを作成し、データベース権限を付与する方法の例

序文MySQL をインストールすると、通常はスーパーユーザー root を作成します。多くの人がこの...

VueはWebSocketを使用してチャット機能をシミュレートします

この効果は、2つのブラウザが互いにシミュレートしていることを示しています 1. シミュレートされたノ...

Meituan DBデータをデータウェアハウスに同期するアーキテクチャと実践

背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...

Vueカスタムコンポーネントはイベント修飾子を使用してピットレコードを踏む

序文今日、自作のコンポーネントを使っていたところ、突然、長い間忘れていたバブリングイベントに遭遇しま...

CSSはラジオをクリックして2つの画像スタイルを切り替えますが、複数のラジオのうち1つだけをチェックできます。

クリックされたボタンには赤い画像スタイルを実装し、選択されていない他のボタンには灰色の画像スタイルを...

Dockerイメージサイズを最適化する一般的な方法

通常、私たちが構築する Docker イメージはサイズが大きく、多くのディスク領域を占有します。コン...