[解決済み] DIVを等間隔に配置した場合の流体幅

質問

フルード幅のコンテナDIVがあります。

この中に4つのDIVがあり、すべて300px x 250pxです...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

ボックス 1 を左に、ボックス 4 を右にフロートさせ、ボックス 2 と 3 の間に等間隔に配置したいのです。 ブラウザを小さくすると、スペースも小さくなるので、スペースは流動的にしたい。

解決方法は？

ご覧ください。 http://jsfiddle.net/thirtydot/EDp8R/

• で動作します。 IE6+をはじめ、すべてのモダンブラウザに対応!
• 作業しやすいように、ご要望の寸法を半分にしました。
• text-align: justify と合わせて .stretch が位置決めをしています。
• display:inline-block; *display:inline; zoom:1 フィックス inline-block IE6/7用。 こちらをご覧ください .
• font-size: 0; line-height: 0 はIE6でのマイナーな問題を修正しました。

#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 id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <span class="stretch"></span>
</div>

余分な span ( .stretch ) に置き換えることができます。 :after .

これは 静止画 を、上記の解決策と同じすべてのブラウザで実行します。 :after はIE6/7で動作しないが、彼らは distribute-all-lines ということです。

ご覧ください。 http://jsfiddle.net/thirtydot/EDp8R/3/

には、ちょっとしたデメリットがあります。 :after : 最後の行をSafariで完璧に動作させるには、HTMLの空白に注意する必要があります。

具体的には、これではうまくいきません。

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

そして、これはそうです。

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

これを任意の数の子機に使うことができる div を追加することなく boxN を変更することで、それぞれのクラスに

.box1, .box2, .box3, .box4 { ...

になります。

#container > div { ...

の最初の子である div が選択されます。 #container divの下にあるものはありません。背景色を一般化するために CSS3 nth-orderセレクタ ただし、IE9+とその他のモダンブラウザでのみサポートされています。

.box1, .box3 { ...

になります。

#container > div:nth-child(odd) { ...

参照 こちら は、jsfiddleの例です。