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をよろしくお願いいたします。