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タグを学ぶ

推薦する

MySQLは、統計クエリを最適化するために、sum、case、whenを巧みに使用します。

私は最近、会社で統計レポートの開発に関わるプロジェクトに取り組んでいました。データの量が比較的多かっ...

MySQLデュアルマシンホットスタンバイと負荷分散の実装手順の詳細説明

MySQL データベースには増分バックアップ メカニズムはありませんが、マスター データベース内のす...

ElasticSearch と ElasticSearch-Head の Docker デプロイメントの実装

この記事では主にDockerを使ってElasticSearch:バージョン6.8.4をデプロイする方...

MySQL テーブルをコピーする 3 つの方法 (要約)

テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...

Ubuntu 20.04 に cuda10.1 をインストールする手順 (グラフィック チュートリアル)

インストール前の準備CUDA の主な目的はディープラーニングであり、現在主流のディープラーニングフレ...

Linuxカーネルマクロcontainer_ofの詳細な分析

1. 前述の通り数年前、Linux ドライバーのコードを読んでいたときにこのマクロを見ました。長い間...

MySQL 8.0 の binlog の詳細な説明

1 はじめにバイナリ ログは、データを持つ、またはデータを変更する可能性がある SQL ステートメン...

MySQLユーザー権限テーブルについての簡単な説明

MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...

Linux のメモリ管理とアドレス指定の詳細な紹介

目次1. コンセプトメモリ管理モード住所種別分類例: 2. ページ管理x86 アーキテクチャ 32 ...

yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。

yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...

Vue は水の波紋効果のクリックフィードバック指示を実装します

目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...

mysql8.0.18 で winx64 をインストールするための詳細なチュートリアル (画像とテキスト付き)

MySQLデータベースをダウンロードするには、https://dev.mysql.com/down...

CSS の画像パスの問題に関する議論 (同じパッケージ/異なるパッケージ)

CSS ファイルでは、背景を使用する、つまり背景画像を追加する必要がある場合があります。これは通常、...

ローカルの Windows リモート デスクトップから Alibaba Cloud Ubuntu 16.04 サーバーに接続する方法

ローカル Windows リモート デスクトップが Alibaba Cloud Ubuntu 16....