前提条件: <meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover"> 効果図は以下のとおりです。 需要分析 高さと幅: 1枚 [幅320、高さ320] [下書きサイズの2倍] 間隔: 画像が 2 枚ある場合、最後の画像には左余白のみがあります。 丸い角10: 画像が1枚の場合、[すべて]角が丸くなります 誘導 私たちは中学校で数学の帰納法を学びました。これは、まず命題がn=1のときに真であるかどうかを調べ、次にn=kのときに真であると仮定し、n=k+1のときにも真であることを証明し、それによって命題がn=k [kは任意の実数]のときに真であることを証明するというものです。 コード <div class="grid-img-box"> <van-image class='grid-img' v-for="data.photo の値" :key="値" fit="カバー" :src="値" /> </div> .grid-img{ /** 幅と高さ 1. 3n+1 で、最後から 2 番目の画像です。 2. 3n+1 で、最後の画像です。 どちらの場合も、画像の幅と高さは 320 である必要があります。 残りの2つのケースは次のとおりです。 3. 画像が 1 枚しかない場合は、幅と高さは 320 です。 4. その他のケースとインデックスでは、幅と高さは両方とも 220 です。 */ 表示: インラインブロック; 幅: 220ピクセル; 高さ: 220px; &:一人っ子{ 幅: 320ピクセル; 高さ: 320px; } &:n番目の子(3n+1):最後のn番目の子(2), &:n番目の子(3n+2):最後の子{ 幅: 332ピクセル; 高さ: 332px; } /** 間隔/レイアウト*/ &:n番目の子(3n+2){ マージン: 0 6px; } &:n番目の子(n+4){ 上マージン: 6px; } &:最初の子{ 左上の境界線の半径: 10px; } &:最後の子{ 右マージン: 0; 右下の境界線の半径: 10px; } /** 角丸*/ //左下の丸い角: 最後の行の最初の &:nth-child(3n+1) { &:最後の子, &:n番目最後の子(2), &:n番目最後の子(3){ 左下の境界線の半径: 10px; } } // 4 つのレイアウトを処理する // 2 番目の余白を増やして 3 番目のレイアウトを次の行に押し出す &:nth-child(2):nth-last-child(3){ 右マージン: 220px; } //2番目の丸い角をリセットします &:nth-child(2):nth-last-child(3){ 右上の境界線の半径: 10px; } //3番目の余白と半径をリセットします &:n番目の子(3):最後のn番目の子(2){ 上マージン: 6px; 右マージン: 6px; 境界線の半径: 0 0 0 10px; } //4番目の丸い角をリセットします &:nth-child(4):last-child{ 境界線の半径: 0 0 10px 0; } } 要約する CSS を使用して動的な画像の 9 グリッド レイアウトを実装する方法について説明したこの記事はこれで終わりです。CSS 9 グリッド レイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: MySql キャッシュ クエリの原理とキャッシュ監視およびインデックス監視の概要
>>: IE環境では、divの高さはフォントの高さよりも大きくなければならないと規定されています。
一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...
1. MyISAM ストレージエンジン欠点:トランザクションはサポートされていません最小粒度ロック:...
アクセス数が増えると、MySQL データベースへの負荷が増大します。MySQL アーキテクチャを使用...
1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...
Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...
目次基本的な紹介入門テスト (Excel ファイルからのデータの読み取り)ステップ1: Maven座...
/etc/fstabパーティション/ディスクを自動的にマウントし、マウントするパーティション/デバイ...
場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...
<br />このセクションでは、XHTML でテキストの書式設定と特殊文字を実装する方法...
CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...
例:例として、Python コード loop_hello.py を使用します。このコードは、ループ回...
チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...
1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...
Docker で Zookeeper を素早くインストール会社を変わってから長らくZookeeper...
この記事では、権限の問題により MySQL 構成ファイル my.cnf を起動できない場合の関連する...