典型的なレイアウト例 上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。レイアウトをより完璧にするにはどうすればよいでしょうか。たとえば、レイアウトが完成したら、同じレイアウトを維持するために要素をすばやく追加することができます。 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 クラウドのファイルのアップロードとダウンロード
目次1 バージョンと計画1.1 バージョン情報: 1.2 クラスター計画2. 展開1. ファイアウォ...
コードをコピーコードは次のとおりです。 <meta name="viewport&q...
1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...
CSS3 カテゴリ メニューの効果は次のとおりです。 html <html> <ヘ...
目次1. イベントのリスニング2. イベントパラメータを渡す3. イベント修飾子ケース1: クリック...
広告を閉じるまでのカウントダウンを実装するために JavaScript を使用するまだフロントエンド...
1. 先頭のあいまいクエリではインデックスを使用できません (「%XX」や「%XX%」など)コード値...
目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...
目次Vuex とは何ですか? Vuexの5つの特性vuex の State 機能とは何ですか? vu...
疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...
HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...
RedHat6.5インストールMySQL5.7チュートリアル共有、参考までに、具体的な内容は次のとお...
コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...
HTMLタグのリストマークタイプ名前または意味効果述べるファイルのタグ付け<HTML> ...
序文日常の仕事や勉強では、データベースを操作するときに「不注意」によるミスを犯すことは避けられません...