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

推薦する

CSS3 境界効果

CSSとは# CSS (Cascading Style Sheets の略) は、「カスケーディング...

初心者のためのウェブサイト構築入門 - ウェブサイト構築に必要な条件とツール

今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...

VMware 仮想マシン (CentOS7 イメージ) を使用して Linux をインストールする

1. VMwareのダウンロードとインストールリンク: https://www.jb51.net/s...

MySQL が暗黙のデフォルト値を処理する方法

何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...

XHTML の一般的な構造タグ

構造本文、見出し、HTML、タイトル文章abbr、頭字語、アドレス、引用ブロック、br、引用、コード...

Vueはechartを使用してラベルと色をカスタマイズします

この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...

Linx awk入門チュートリアルの詳細な説明

Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...

JavaScriptのクローン作成についての簡単な説明

目次1. 浅いクローニング2. ディープクローニング1. 浅いクローニング浅いクローンでは配列やオブ...

テーブルパーティションとパーティション分割とは何ですか?MySqlデータベースパーティションとテーブルパーティション分割方法

1. テーブルとパーティションを分割する必要があるのはなぜですか?日常の開発では、大きなテーブルに遭...

Navicat を使用して MySQL データベースをエクスポートおよびインポートする方法

MySql は、私たちが頻繁に使用するデータ ソースです。開発者が練習、小規模なプライベート ゲーム...

Ubuntu 16.04 で MySQL マスター スレーブ同期を設定する方法

準備1. マスターとスレーブのデータベースのバージョンは一致している必要があります2. マスターデー...

CentOS7 ファイアウォールとオープンポートの簡単な使い方の簡単な紹介

概要(公式にはより詳しい説明があります) Firewalld は、ネットワーク接続またはインターフェ...

Vueでクラススタイルを使用する方法の詳細

目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...

VMware vSphere 6.7 (ESXI 6.7) のグラフィック インストール手順

環境: VMware VCSA 6.7 (VMware-VCSA-all-6.7.0-8169922...

vue-router を遅延ロードする 3 つの方法のまとめ

遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...