html - DIV が等間隔に配置された流体幅

Question

Fluid width コンテナー DIV があります。

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

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

私が実現したいのは、ボックス 1 を左に、ボックス 4 を右に、ボックス 2 と 3 を等間隔に配置することです。ブラウザを小さくするとスペースも小さくなるように、スペースも流動的にしたいと思います。

ここに画像の説明を入力

score 445 · Accepted Answer

参照: http://jsfiddle.net/thirtydot/EDp8R/

これはIE6+ および最新のすべてのブラウザで動作します!
作業しやすいように、要求された寸法を半分にしました。
text-align: justifyと組み合わせて.stretch、ポジショニングを処理しているものです。
display:inline-block; *display:inline; zoom:1inline-blockIE6/7 の修正については、こちらを参照してください。
font-size: 0; line-height: 0IE6 の軽微な問題を修正。

#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 { ...

これにより、div の最初の子である#containerdiv が選択され、その下に他のものは選択されません。背景色を一般化するには、CSS3 nth-order selectorを使用できますが、これは IE9+ およびその他の最新のブラウザーでのみサポートされています。

.box1, .box3 { ...

になります：

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

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

score 155 · Accepted Answer

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

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/

score 20 · Accepted Answer

css3がオプションの場合、これは css 関数を使用して実行できますcalc()。

ケース 1: ボックスを 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() を使用して右マージンを計算し、nth-child を使用して最後の列のボックスから右マージンを削除します。

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

ブラウザのサポートについて: これは IE9 以降、Firefox、Chrome、Safari6.0 以降で動作します - (詳細については、こちらを参照してください) ~~。[誰かがこれを修正する方法を知っているなら、私は本当に知りたいです:)]~~ <-- FIXED HERE

score 2 · Accepted Answer

これは、異なるサイズの5つの画像でうまくいきました。

コンテナ div を作成する
画像の順序なしリスト
css では、順序付けされていないものは垂直に、箇条書きなしで表示する必要があります
コンテナ 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>

score 1 · Accepted Answer

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'注: これは、widthとHeightSetがあることを前提としています。

お役に立てば幸いです。

html - DIV が等間隔に配置された流体幅

7 に答える 7

ケース 1: ボックスを 1 行に揃える ( FIDDLE )

ケース 2: 複数行のボックスを揃える ( FIDDLE )

Related

Reference