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. 重複するメールボックスを削除する)

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

推薦する

表面的なウェブデザイン

<br />私はいつもYahooのウェブデザインが素晴らしいと信じてきました。しかし、こ...

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...

mysqlはストアドプロシージャを使用してツリーノード取得メソッドを実装します。

図に示すように: テーブルデータこのようなツリーの場合、「Gao Yinrui」の下のすべてのノード...

Win10 への MySQL 5.7 のインストール MSI 版のチュートリアル(画像とテキスト付き)

主にインストール後に my.ini ファイルを確認するために、msi 形式でインストールしました。フ...

WeChatアプレットのスクロールビューが左右の連動を実現

この記事では、WeChatアプレットのスクロールビューの左右連動を実現するための具体的なコードを参考...

Vue Element フロントエンドアプリケーション開発開発環境の準備

目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...

JSはUUIDとNanoIDというユニークなIDメソッドを生成します

目次1. NanoIDがUUIDに取って代わる理由2. jsを生成する方法3. ナノID方式序文:ユ...

Docker環境でJenkinsを設定すると、タスクをビルドするときにコンソールログに文字化けした中国語の文字が表示されます

目次1. 問題の説明: 2. Jenkins設定のトラブルシューティング3. コードログのエンコード...

MySQL カーソルの概念と使用法の詳細な説明

この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...

MySQL で時刻と日付の型を保存する際の選択問題を分析する

一般的なアプリケーションでは、timestamp、datetime、int 型を使用して時間形式を保...

Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...

Dockerfileを使用してDockerイメージを構築する

目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...

Linux 圧縮ファイルコマンド zip の使用例

「.zip」形式は、Windows システムでファイルを圧縮するために使用されます。実際、「.zip...

一般的な MySQL ストレージ エンジンとパラメータ設定およびチューニングの紹介

MyISAM、MySQLでよく使われるストレージエンジン特性: 1. 同時実行性とロックレベル2. ...