前提条件: <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の高さはフォントの高さよりも大きくなければならないと規定されています。
DNMP の紹介DNMP (Docker + Nginx + MySQL + PHP7/5 + Re...
React では、this.state を使用して状態を直接変更しても、コンポーネントは再レンダリン...
序文サーバーシステム環境は、CentOS 6.5 (最終) です。 FFmpeg をサーバーに正常に...
以下は、Shiji Tiancheng が Tencent KartRider ページを呼び出すため...
1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...
目次K8Sの高度な機能高度な機能要約するkubectl サービスの問題のトラブルシューティングK8S...
序文現在、私はコースウェア PPT のオンライン プレビューを必要とする高品質のコースに取り組んでい...
この記事では、WeChatアプレットのウォーターフォールフローページングスクロールロードを実装するた...
今日、ちょっとした問題に遭遇し、長い間苦労しました。そのことを皆さんにシェアしたいと思います。 a ...
誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...
実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...
仕える: # chkconfig --list すべてのシステムサービスを一覧表示する# chkco...
目次この期間の目標1. 関数の実装1.1 構造層1.2 スタイルレイヤー1.3 行動層1.3.1 フ...
Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...
MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...