典型的なレイアウト例 上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。レイアウトをより完璧にするにはどうすればよいでしょうか。たとえば、レイアウトが完成したら、同じレイアウトを維持するために要素をすばやく追加することができます。 2 行目が表示されても、このレイアウトは影響を受けません。コンテンツを過度に変更する必要はありません。 幅を100%に設定し、ブロック要素のデフォルトの幅を設定します。 ここで問題について話しましょう。ブロック要素のデフォルトの幅は 1 行を埋めることになっていますが、これは要素に 100% を設定することと簡単に混同される可能性があります。実際には、両方の方法が親要素全体を占有するため、これら 2 つの方法の効果は同じであると考えるのは簡単です。しかし、両者の間にはまだ大きな違いがあります。 1行を占めるブロック要素の幅に対するマージン設定の影響 次の2つのルールを覚えておいてください
次の図に示すように: ルール1の例: ルール2の例: 解決 平均面積を分割する まず、水平領域を 5 等分して水平に配置します。次に、フローティング水平配置を使用して、各要素を平均 20% に設定します。 <ul class="リスト"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 。リスト{ オーバーフロー: 非表示; } .リスト li{ 幅: 20%; 高さ: 100px; フロート: 左; } 各エリアにコンテンツを配置し、margin-rightを使用してスペースを作成します。 <ul class="リスト"> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> </ul> 。リスト{ オーバーフロー: 非表示; } .リスト li{ 幅: 20%; 高さ: 100px; フロート: 左; } 。コンテンツ{ 右マージン: 10px; } この時点で、最後の要素には 10 ピクセルの間隔が追加されていることが想像できます。最後のステップは、この間隔の問題を解決する方法です。 親要素を引き伸ばして、端の隙間を隠す リストに別の要素を追加して、リストが親要素の下に伸び、余分な部分だけを隠すようにします。 <div class="wrapper"> <ul class="リスト"> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> </ul> </div> .ラッパー{ 幅: 800ピクセル; オーバーフロー: 非表示; } 。リスト{ オーバーフロー: 非表示; 右マージン: -10px; } .リスト li{ 幅: 20%; 高さ: 100px; フロート: 左; } 。コンテンツ{ 右マージン: 10px; } 実際の効果を確認し、冒頭で示した効果を最終的に達成できます。このレイアウト方法には多くのスケーラビリティがあります。 1 行に 4 つの要素がある場合、各要素の幅を 25% に設定し、要素の数から 1 を引くだけで済みます。 これで、ページ間にスペースのあるグリッドレイアウトを完璧に実装する方法についての記事は終了です。ページ間にスペースのあるグリッドレイアウトの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Linux コマンドライン操作 Baidu クラウドのファイルのアップロードとダウンロード
インデックス条件プッシュダウン (ICP) は MySQL 5.6 で導入され、クエリを最適化するた...
次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...
この記事では、MySQL の左結合における on 条件と where 条件の使用法の違いを例を使って...
WML (ワイヤレス マークアップ言語)。これは HTML から派生したマークアップ言語ですが、W...
精度の問題に対する最もわかりやすい説明たとえば、1÷3=0.33333333...という数字は、3が...
この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...
ログローテーションは、Linux システムでは非常に一般的な機能です。ログローテーションは、システム...
この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...
1. ディスプレイボックス;要素にこのプロパティを設定すると、display:inline-bloc...
1.まずサーバーにリモート接続する2. サーバーマネージャーを開く 3役割と機能の追加 4サーバープ...
mysqlbinlogのバージョンを表示mysqlbinlog -V [--version] bin...
目次1. 使いやすい2. 関数内でジェネリックを使用する3. クラス内でジェネリックを使用する4. ...
目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...
.NET SDK ダウンロード リンクhttps://dotnet.microsoft.com/do...
この記事では、explain を使用して SQL ステートメントを分析する方法を紹介します。実際、イ...