ページに間隔を空けてグリッドレイアウトを完璧に実装する方法

ページに間隔を空けてグリッドレイアウトを完璧に実装する方法

典型的なレイアウト例

上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。レイアウトをより完璧にするにはどうすればよいでしょうか。たとえば、レイアウトが完成したら、同じレイアウトを維持するために要素をすばやく追加することができます。 2 行目が表示されても、このレイアウトは影響を受けません。コンテンツを過度に変更する必要はありません。

幅を100%に設定し、ブロック要素のデフォルトの幅を設定します。

ここで問題について話しましょう。ブロック要素のデフォルトの幅は 1 行を埋めることになっていますが、これは要素に 100% を設定することと簡単に混同される可能性があります。実際には、両方の方法が親要素全体を占有するため、これら 2 つの方法の効果は同じであると考えるのは簡単です。しかし、両者の間にはまだ大きな違いがあります。
これらの主な違いは、要素の幅がどのように変化するかにあります。100% に設定すると、要素の幅は常に親要素と一致し、要素に設定されたマージンは要素の幅の変化に影響しません。もちろん、この要素の幅の変更に影響するのは親要素の幅のみです。幅が設定されていない場合、ブロック要素は 1 行を占め、要素の幅は親要素だけでなく要素の余白によっても影響を受けます。

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 クラウドのファイルのアップロードとダウンロード

>>:  Vueライフサイクルカメラの8つのフック関数

推薦する

Centos7 システムに k8s クラスターを展開するための詳細な紹介

目次1 バージョンと計画1.1 バージョン情報: 1.2 クラスター計画2. 展開1. ファイアウォ...

メタタグのビューポートはデバイス画面のCSSを制御します

コードをコピーコードは次のとおりです。 <meta name="viewport&q...

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...

CSS3 カテゴリメニュー効果

CSS3 カテゴリ メニューの効果は次のとおりです。 html <html> <ヘ...

Vue v-onディレクティブの使用について

目次1. イベントのリスニング2. イベントパラメータを渡す3. イベント修飾子ケース1: クリック...

広告を閉じるための JavaScript カウントダウン

広告を閉じるまでのカウントダウンを実装するために JavaScript を使用するまだフロントエンド...

MySQLインデックスが失敗するいくつかの状況の詳細な分析

1. 先頭のあいまいクエリではインデックスを使用できません (「%XX」や「%XX%」など)コード値...

Vue のプロダクション環境と開発環境を切り替えてフィルターを使用する方法

目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...

Vuexの特性と機能の詳細な説明

目次Vuex とは何ですか? Vuexの5つの特性vuex の State 機能とは何ですか? vu...

Tomcat が応答データグラムを書き戻すタイミングの詳細な分析

疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...

入力ボックスのプレースホルダーテキストのデフォルトの色を変更する -webkit-input-placeholder メソッド

HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...

RedHat 6.5 に MySQL 5.7 をインストールするための詳細なチュートリアル

RedHat6.5インストールMySQL5.7チュートリアル共有、参考までに、具体的な内容は次のとお...

テキストエリア テキストエリアの幅と高さ 幅と高さの自動適応実装コード

コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...

HTML タグのリストと使用方法

HTMLタグのリストマークタイプ名前または意味効果述べるファイルのタグ付け<HTML> ...

MySQLの誤操作後にbinlog2sqlを使用して素早くロールバックする方法の詳細な説明

序文日常の仕事や勉強では、データベースを操作するときに「不注意」によるミスを犯すことは避けられません...