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

典型的なレイアウト例

上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。レイアウトをより完璧にするにはどうすればよいでしょうか。たとえば、レイアウトが完成したら、同じレイアウトを維持するために要素をすばやく追加することができます。 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つのフック関数