Momentsで写真を整理するためのCSSコード

Momentsで写真を整理するためのCSSコード

まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照してください。

1 枚の写真と 4 枚の写真を除いて、他のすべての写真は 1 行 3 列に配置されていることがわかります。

次の HTML コードがあるとします。ここで、imgList は画像アドレスの配列です。

<ul>
    <li v-for="(item, index) in imgList" :key=index >
        <img :src="アイテム">
    </li>
</ul>

1. まず、flex を使用して通常の 3 列レイアウトを実現します。

wrap に設定すると、各要素は指定された幅の 1/3 を占めます。ただし、各行の最後の要素 (3n) は margin-right を設定し、スペースを予約します。

ul{
  ディスプレイ: フレックス;
  コンテンツの配置: flex-start;
  flex-wrap: ラップ;
}
li{
  幅: 32%; 
  高さ: 100px;
  上マージン: 5px;
}
.list:not(:n番目の子(3n)) {
  右マージン: 2%;
}

2. 画像が 1 つしかない場合は、CSS セレクターを使用してそれが画像であることを確認し、画像のサイズを変更します。

セレクタロジック: 要素が最後の要素であり、かつ最初の要素である場合、要素は1つしかないと判断できます。そのスタイルを個別に設定して、元のスタイルを上書きします。

ul li:n番目の最後の子(1):最初の子{
  幅: 200ピクセル;
  高さ: 200px;
}

3. 写真が 4 枚ある場合、写真を 2 行 2 列にレイアウトする必要があります。この場合、3 列を 2 列に変更するには、2 番目の写真に margin-right を追加する必要があります。

セレクタロジック: 要素が最後から 4 番目で最初の要素である場合、合計で 4 つの要素があると判断されます。
次に、同じレベルの 2 番目の要素を選択し、それに margin-right 属性を追加します。

ul li:n番目の最後の子(4):最初の子 ~ li:n番目の子(2n){
  右マージン: 32%;
}

その前に、3 番目の要素の間隔を復元する必要があります。そうしないと、Moments と同様に、4 つの写真が間隔を空けて表示されません。必要に応じて、次のように他の属性を設定することもできます。(この属性は前の属性の前にある必要があります)

ul li:n番目の最後の子(4):最初の子、ul li:n番目の最後の子(4):最初の子 ~ li{
  幅: 50%;
  右マージン: 0;
}

要約する

これで、CSSを使用してMomentsで写真を配置する方法についての記事は終了です。CSSによる写真の配置とレイアウトの詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  LeetCode の SQL 実装 (196. 重複するメールボックスを削除する)

>>:  子ども向けウェブサイトの視覚構造レイアウト設計手法の分析

推薦する

nginx をプロキシ キャッシュとして使用する方法

キャッシュを使用する目的は、バックエンドの負荷を軽減し、Web サイトの同時実行性を向上させることで...

VMware仮想マシンブリッジによるインターネット相互接続を実現する方法

VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...

HTML コード例: ハイパーリンクの詳細な説明

ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるた...

n 個のコンテナ要素による無限スクロールの実装コード

シナリオ最大 10000 要素のリストを正しくレンダリングする方法。無限ドロップダウン読み込みテクノ...

Vue を使用した Amap アプリケーション開発のベスト プラクティス

目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...

MySQL に 1,000 万件のレコードを素早く挿入する方法

面接で「MySQL に 1,000 万件のレコードをすばやく挿入するにはどうすればよいか」という質問...

ウェブテーブルフレームを作成するためのヒント

<br />Web テーブル フレームを作成するためのヒント。 ------------...

Windows サーバー ファイルをローカルにバックアップする方法、Windows サーバー データ バックアップ ソリューション

重要なデータはバックアップする必要があり、リアルタイムでバックアップする必要があります。そうしないと...

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...

コードレイン効果を実現するjQueryプラグイン

この記事では、コードレイン特殊効果を実現するためのjQueryプラグインの具体的なコードを参考までに...

MySQL データ型 DECIMAL(N,M) における N と M の意味の詳細な説明

同僚から、MySQL データ型 DECIMAL(N,M) の N と M の意味を尋ねられました。言...

SQL効率を分析する方法を説明する

Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...

コードブロックのハイライトをコピーして表示できる js プラグイン highlight.js + clipboard.js 統合

主に2つの側面から: 1. ハイライト/改行2. コードのコピーボタンこれら両方には既製のプラグイン...

MySQLトリガーの使用と理解

目次1. トリガーとは何ですか? 2. トリガーを作成するトリガーを作成するための構文は次のとおりで...