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

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

典型的なレイアウト例

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

推薦する

MySQL パフォーマンス最適化インデックス プッシュダウン

インデックス条件プッシュダウン (ICP) は MySQL 5.6 で導入され、クエリを最適化するた...

レスポンシブ Web デザイン手法を実装し、ウォーターフォール モデルに別れを告げる 5 つのステップ (グラフィック チュートリアル)

次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...

MySQL の on と where における左結合設定条件の使用法の違いの分析

この記事では、MySQL の左結合における on 条件と where 条件の使用法の違いを例を使って...

WMLとは何ですか?

WML (ワイヤレス マークアップ言語)。これは HTML から派生したマークアップ言語ですが、W...

JS の精度外数値問題の解決

精度の問題に対する最もわかりやすい説明たとえば、1÷3=0.33333333...という数字は、3が...

Vueはプラグインを使用して画像を比例してカットします

この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...

Linux システムでログを手動でスクロールする方法

ログローテーションは、Linux システムでは非常に一般的な機能です。ログローテーションは、システム...

Vue.jsでタブ切り替えと色変更操作を実装する解説

この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...

新しい CSS display:box プロパティの詳細な説明

1. ディスプレイボックス;要素にこのプロパティを設定すると、display:inline-bloc...

Win Server 2019 サーバーの IIS 構成と Web サイトの簡単な公開

1.まずサーバーにリモート接続する2. サーバーマネージャーを開く 3役割と機能の追加 4サーバープ...

mysql bin-log ログファイルを sql ファイルに変換する方法

mysqlbinlogのバージョンを表示mysqlbinlog -V [--version] bin...

TypeScriptジェネリックの使用

目次1. 使いやすい2. 関数内でジェネリックを使用する3. クラス内でジェネリックを使用する4. ...

この記事では、jsのデータ型とデータ構造の世界を紹介します。

目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...

クラウド サーバーを使用して CentOS システムに .NET 6.0 をインストールする

.NET SDK ダウンロード リンクhttps://dotnet.microsoft.com/do...

SQL文のパフォーマンスを分析するための標準的な要約

この記事では、explain を使用して SQL ステートメントを分析する方法を紹介します。実際、イ...