等間隔の DIV を持つ流体幅コンテナを作成するにはどうすればよいですか?

等間隔の DIV を持つ流体幅

課題は、4 つの等間隔の DIV を持つ流体幅コンテナを作成することです。 DIV は水平方向に整列し、DIV 1 が左にフローティング、DIV 4 が右にフローティング、DIV 2 と 3 がその間に配置される必要があります。さらに、ブラウザのサイズが変更されると、間隔が動的に調整される必要があります。

解決策

これを実現するには、CSS プロパティ text-align: justify および display: を利用できます。インラインブロック。コードは次のとおりです。

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

説明

• #container 要素は text-align: justify に設定されています。これにより、テキストがコンテナの幅を満たすように強制的に拡張されます。
• 各 .box 要素は、表示: inline-block に設定されます。これにより、インライン要素のように動作できますが、幅と高さが固定されます。
• .stretch 要素は、.box 要素間のスペーサーとして機能します。 width: 100%; に設定されており、残りのスペースを埋めるように引き伸ばされます。
• font-size: 0;および line-height: 0 は、IE6 の問題を修正します。

ブラウザのサイズが変更されると、.stretch 要素は幅を調整して .box 要素間の間隔を維持するため、流動的なレイアウトになります。

以上が等間隔の DIV を持つ流体幅コンテナを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。