まず、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 つの要素があると判断されます。 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. 重複するメールボックスを削除する)
>>: 子ども向けウェブサイトの視覚構造レイアウト設計手法の分析
1.コンテナ内の /etc/hosts、/etc/resolv.conf、/etc/hostname...
キャッシュを使用する目的は、バックエンドの負荷を軽減し、Web サイトの同時実行性を向上させることで...
VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...
ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるた...
シナリオ最大 10000 要素のリストを正しくレンダリングする方法。無限ドロップダウン読み込みテクノ...
目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...
面接で「MySQL に 1,000 万件のレコードをすばやく挿入するにはどうすればよいか」という質問...
<br />Web テーブル フレームを作成するためのヒント。 ------------...
重要なデータはバックアップする必要があり、リアルタイムでバックアップする必要があります。そうしないと...
目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...
この記事では、コードレイン特殊効果を実現するためのjQueryプラグインの具体的なコードを参考までに...
同僚から、MySQL データ型 DECIMAL(N,M) の N と M の意味を尋ねられました。言...
Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...
主に2つの側面から: 1. ハイライト/改行2. コードのコピーボタンこれら両方には既製のプラグイン...
目次1. トリガーとは何ですか? 2. トリガーを作成するトリガーを作成するための構文は次のとおりで...