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:1inline-blockIE6 / 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。

これはまだ動作します上記のソリューションとして、すべて同じブラウザで。:afterIE6 / 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 { ...

これにより、#containerdivの最初の子であるdiv が選択され、その下にあるdivは選択されません。背景色を一般化するには、CSS3 n次セレクターを使用できますが、IE9 +と他の最新のブラウザーでのみサポートされています。

.box1, .box3 { ...

になる：

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

jsfiddleの例については、こちらを参照してください。

これを行う最も簡単な方法は、フレックスボックスを使用することです。

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSSは単純です。

#container {
    display: flex;
    justify-content: space-between;
}

デモ：http : //jsfiddle.net/QPrk3/

ただし、これは現在、比較的最近のブラウザ（http://caniuse.com/flexbox）でのみサポートされています。また、フレックスボックスレイアウトの仕様が数回変更されたため、古い構文を追加することで、より多くのブラウザーに対応することができます。

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

場合CSS3はオプションで、これはCSSの使用して行うことができるcalc()機能を。

ケース1：単一行でボックスを揃える（FIDDLE）

マークアップは単純です-いくつかのコンテナー要素を持つdivの束。

CSSは次のようになります。

div
{
    height: 100px;
    float: left;
    background:pink;
    width: 50px;
    margin-right: calc((100% - 300px) / 5 - 1px); 
}
div:last-child
{
    margin-right:0;
}

ここで-1pxはIE9 + 計算 /丸めのバグを修正します- ここを参照してください

ケース2：ボックスを複数行に揃える（FIDDLE）

ここでは、calc()機能に加えて、media queries必要です。

基本的な考え方は、＃columnsの状態ごとにメディアクエリを設定することです。この場合、calc（）を使用して、各要素（最後の列の要素を除く）の余白を計算します。

これは大変な作業のように思えますが、LESSまたはSASSを使用している場合、これは非常に簡単に行うことができます

（通常のcssでも実行できますが、すべての計算を手動で実行する必要があります。次に、ボックスの幅を変更した場合は、すべてを再計算する必要があります）

以下はLESSを使用した例です（このコードをここにコピーして貼り付けて遊んでください。[上記のフィドルの生成に使用したコードでもあります]）。

@min-margin: 15px;
@div-width: 150px;

@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);

@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);


*{margin:0;padding:0;}

.container
{
    overflow: auto;
    display: block;
    min-width: @3divs-width;
}
.container > div
{
    margin-bottom: 20px;
    width: @div-width;
    height: 100px;
    background: blue;
    float:left;
    color: #fff;
    text-align: center;
}

@media (max-width: @3divs-width) {
    .container > div {  
        margin-right: @min-margin;
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @3divs-width) and (max-width: @4divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @4divs-width) and (max-width: @5divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
    }
    .container > div:nth-child(4n) {  
        margin-right: 0;
    }
}

@media (min-width: @5divs-width) and (max-width: @6divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
    }
    .container > div:nth-child(5n) {  
        margin-right: 0;
    }
}

@media (min-width: @6divs-width){
    .container > div {  
        margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
    }
    .container > div:nth-child(6n) {  
        margin-right: 0;
    }
}

したがって、基本的には、最初にボックスの幅とボックス間の最小マージンを決定する必要があります。

これで、各州に必要なスペースを計算できます。

次に、calc（）を使用して右マージンを計算し、n番目の子を使用して、最終列のボックスから右マージンを削除します。

使用される受け入れられた回答に対するこの回答の利点はtext-align:justify、ボックスの行が複数ある場合-最終行のボックスが「正当化」されないことです。たとえば、最終行に2つのボックスが残っている場合-私は最初のボックスを左側に配置し、次のボックスを右側に配置するのではなく、ボックスを順番に並べます。

ブラウザーのサポートについて：これはIE9 +、Firefox、Chrome、Safari6.0 +で動作します（詳細についてはこちらを参照）。[誰かが知っている私は本当にたいと思い、この問題を解決する方法を知っている場合:)] < - FIXED HERE

他の投稿ではflexboxについて言及していますが、複数行のアイテムが必要な場合、flexboxのspace-betweenプロパティは失敗します（投稿の最後を参照）

これまでのところ、これに対する唯一のクリーンなソリューションは

CSSグリッドレイアウトモジュール（Codepenデモ）

基本的に関連する必要なコードはこれに要約されます：

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: space-between; /* (4) */
  align-content: flex-start; /* (5) */
}

1）コンテナー要素をグリッドコンテナーにする

2）必要に応じて、グリッドに「自動」の列数を設定します。これはレスポンシブレイアウトで行われます。各列の幅は120pxになります。（の使用に注意してくださいauto-fit（に並置としてauto-fill0に空のトラックが折りたたまれている（1行のレイアウトのための）） - 。アイテムは、残りのスペースを取るために拡張することができます（チェックアウトこのデモを私が話しているかを確認します）））。

3）グリッドの行と列にギャップ/ガターを設定します。ここでは、「スペース間の」レイアウトが必要なので、ギャップは必要に応じて大きくなるため、実際には最小ギャップになります。

4）と5）-flexboxに似ています。

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  grid-gap: 1rem;
  justify-content: space-between;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepenデモ（サイズを変更して効果を確認）

ブラウザのサポート-Caniuse

現在Chrome（Blink）、Firefox、Safari、Edgeでサポートされています！... IEからの部分的なサポート（Rachel Andrewによるこの投稿を参照）

注意：

Flexboxのspace-betweenプロパティは1行のアイテムに対しては適切に機能しますが、アイテムをラップするフレックスコンテナーに適用すると、（を使用してflex-wrap: wrap）失敗します。これは、アイテムの最後の行の配置を制御できないためです。最後の行は常に正当化されます（通常は必要なものではありません）

実証するには：

body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen（私が話していることを見るためにサイズを変更する）

CSSグリッドの詳細：

• MDN
• Jen Simmons-CSSグリッドを学ぶ
• CSSグリッドの完全ガイド| Codrops CSSリファレンス
• グリッドの完全ガイド-CSSトリック

これは、サイズの異なる5つの画像で機能しました。

1. コンテナーdivを作成する
2. 画像の順不同リスト
3. CSSでは、未調整を垂直に、箇条書きなしで表示する必要があります
4. コンテナーdivのコンテンツを正当化する

これは、justify-content：space-betweenが原因で機能し、リスト上に水平に表示されます。

CSSについて

 #container {
            display: flex;
            justify-content: space-between;
 }
    #container ul li{ display:inline; list-style-type:none;
}

html

<div id="container"> 
  <ul>  
        <li><img src="box1.png"><li>
        <li><img src="box2.png"><li>
        <li><img src="box3.png"><li>
        <li><img src="box4.png"><li>
        <li><img src="box5.png"><li>
    </ul>
</div>

jQueryあなたは親を直接ターゲットにするかもしれません。

これは、多くの子供が動的に追加される方法を正確に知らない場合、または自分の数を把握できない場合に便利です。

var tWidth=0;

$('.children').each(function(i,e){
tWidth += $(e).width();

///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);

})
$('#parent').css('width',tWidth);

これparentによりchildren、曲げが追加されたときに水平方向に成長します。

注：これは、セット'.children'があることを前提としていますwidthHeight

お役に立てば幸いです。

「行」あたりの要素の数とコンテナの幅がわかっている場合は、セレクタを使用して、正当な外観にするために必要な要素にマージンを追加できます。

私は正当化したい3つのdivの行を持っていたので、以下を使用しました：

.tile:nth-child(3n+2) { margin: 0 10px }

これにより、各行の中央のdivに、1番目と3番目のdivをコンテナの外側の端に強制するマージンを設定できます。

ボーダーの背景色など、他のものにも最適