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

等間隔の DIV を持つ流体幅コンテナ

流体幅を持つコンテナ DIV があり、この中に 4 つの DIV を配置したいとします。容器。各 DIV のサイズは 300px x 250px である必要があります。ボックス 1 を左にフロートさせ、ボックス 4 を右にフロートさせ、ボックス 2 と 3 をボックス 1 と 4 の間で均等な間隔に配置したいとします。さらに、ブラウザ ウィンドウのサイズに合わせて調整して、間隔を流動的にしたいとします。

解決策:

これを実現するには、次のコマンドを使用します。 code:

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

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

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

.box1,
.box3 {
  background: #ccc
}

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

<div>

このソリューションは次の手法を利用します:

• text-align: justify: コンテナー内にボックスを均等に配置します。
• .stretch: を埋める非表示の要素。残りのスペースを確保し、均等な間隔を確保します。
• display:inline-block: 両端揃えを使用してボックスをインラインかつ間隔をあけて配置できるようにします。
• font-サイズ: 0; line-height: 0: IE6 の問題を修正します。

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