web-dev-qa-db-ja.com

等間隔の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をそれらの間に均等に配置することです。ブラウザを小さくするほどスペースも流動的になり、スペースも狭くなります。

enter image description here

htmlcssfluid-layout
317
Lee Price

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

  • これはIE6 +とすべての最近のブラウザで動作します！
  • 作業しやすくするために、要求された寸法を半分にしました。
  • text-align: justifyと.stretchを組み合わせたものが、ポジショニングを処理しているものです。
  • display:inline-block; *display:inline; zoom:1はIE6/7のinline-blockを修正します、 こちらを参照してください 。
  • 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 { ...

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

.box1, .box3 { ...

になります：

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

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

433
thirtydot

これを行う最も簡単な方法は、flexboxを使用することです。

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 ）。また、flexboxのレイアウトの仕様は数回変更されているので、さらに古い構文を含めることでより多くのブラウザをカバーすることが可能です。

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

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

129
Ben Jackson

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

ケース1：ボックスを1行に配置する（ フィドル ）

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

CSSはこのようになります：

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

ここで - IE9 +計算/丸めバグを修正するための1px - here を参照

ケース2：複数行のボックスを正当化する（ フィドル ）

ここでは、calc()関数に加えて、media queriesが必要です。

基本的な考え方は、#columnsの各状態に対してメディアクエリを設定することです。次に、calc（）を使用して各要素の右マージンを計算します（最後の列のものを除く）。

これは多くの作業のように思えますが、LESSやSASSを使用しているのであれば、これは非常に簡単に実行できます。

（それでも通常のCSSで行うことができますが、その後すべての計算を手動で行わなければならなくなり、ボックスの幅を変更した場合は、もう一度すべてを計算する必要があります）。

以下はLESSを使用した例です。（このコードをコピーして貼り付けることができます here 上記のフィドルを生成するために使用したコード]）

@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を使用する一般的な回答に対するこの回答の利点は、複数行のボックスがある場合、最終行のボックスは正しく表示されません。 'eg：最後の行に2つのボックスが残っている場合 - 最初のボックスを左側に、次のボックスを右側に配置したくはありません - むしろ、これらのボックスが順番に並ぶようにします。

browser supportについて：これはIE9 +、Firefox、Chrome、Safari6.0 +で動作します - （ を参照）詳細はこちら しかし、私はIE9 +では、メディアクエリの状態の間にちょっとした不具合があることに気づきました。 [誰かがこれを修正する方法を知っているなら、私は本当に知りたいのですが:)] < - FIXED HERE

21
Danield

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

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

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-fillと並置）の使用に注意してください（1行のレイアウトの場合）空のトラックを0に折りたたむ-アイテムを展開して残りのスペースを占有できるようにします（チェックアウトこのデモ私が話していることを確認するには））.

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（点滅）、Firefox、Safari、およびEdgeでサポートされています！ ... IEからの部分的なサポート（レイチェルアンドリューによる この投稿 を参照）

注意：

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グリッドの詳細：

11
Danield

これは私にとっては異なるサイズの5つの画像でうまくいきました。

  1. コンテナdivを作成する
  2. 画像の番号なしリスト
  3. CSSでは、未定義の人は縦に、箇条書きなしで表示する必要があります
  4. コンテナーdivの内容を正当化する

これは両端揃えの内容：スペースの間にあり、水平に表示されるリストにあります。

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>
2
Sebastián Brun Valiente

"行"あたりの要素数とコンテナの幅がわかっている場合は、セレクタを使用して要素に余白を追加し、見た目を正しくすることができます。

私は正当化したい3 divの行を持っていたので、次のように使用しました。

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

これにより、各行の中央のdivに、1番目と3番目のdivをコンテナの外側の端に移動させるマージンを持たせることができます。

境界線の背景色などの他のものにも最適

1
Dave Robertson

jQueryでは、親を直接ターゲットにすることができます。

このIS正確に多くの子供を知っていない場合、または実際に番号を見つけられない場合は、動的に追加される可能性があります。

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とHeightを持っていることを前提としています

お役に立てば幸いです。

1
ErickBest