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

等間隔の DIV を使用した流体幅

ユーザーは、同じ寸法 (300px) の 4 つの子 DIV を持つ流体幅コンテナ DIV を作成しようとしています。 × 250ピクセル）。要件は、応答性を維持しながら、最初の DIV を左にフロートし、最後の DIV を右にフロートし、残りの 2 つをそれらの間に均等な間隔で配置することです。

解決策:

次の CSS と HTML を検討してください実装:

#container {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

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

<div>

説明:

• #container DIV は、text-align: justify および display: inline-block プロパティを利用して両端揃えを行います。子 DIV。
• インラインブロックは最新のブラウザでサポートされていますが、ブラウザ間の互換性を確保するため、IE6/7 では、display: inline とzoom: 1 を使用します。
• IE6 では、インラインブロック要素の間隔が適切に設定されていないため、font-size: 0 で幅 100% を使用します。 line-height: 0 は、この問題を修正します。
• クラス「stretch」を持つspan要素は、コンテナ内の残りのスペースを埋めて、 DIV は均等に配置されます。
• 子 DIV は、デモンストレーションの目的で目的の寸法に設定され、特定の背景色が指定されます。

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