web-dev-qa-db-ja.com

コンテンツ幅でコンテナdivを展開します

私のアプリケーションには次の構造があります。

<div id="container">
  <div id="child_container">
    <div class="child"></div>
    <div class="child"></div>
    ...
    <div class="child"></div>
  </div>
</div>

各子divには既知の固定幅がありますが、アプリケーションでは、それらの多くをchild_container divに挿入できます。

私がやろうとしていることは、子コンテナの合計幅を考慮して、必要なときにコンテナdivを水平に拡張することです。

これは現在何が起こるかです：

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

Child_container divの幅を固定値に設定すると、コンテナdivを超えて水平方向に拡張することができます。

+------ container -------+
+------ child_container -+----+
| child1 child2 child3 child4 |
+------------------------+----+

ただし、新しい子が追加されるたびに再計算する必要があります。

最終結果が次のようになるように、子コンテナの固定幅を使用せずにこれを行う方法はありますか

+--------- container ---------+
+------ child_container ------+
| child1 child2 child3 child4 |
+-----------------------------+

ありがとう。

csscontainersexpand
43
Andre

このような何かが動作するはずです：

#container, #child_container, .child { 
    position: relative; 
    float: left;
}
30
wajiw

さらに簡単：

<style>
    #container{ display: inline-block; }
</style>
30
Nate Barr

子要素が追加されても、親コンテナは成長しません。

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

ただし、css3フレックスボックスを使用することで、次の行で新しいレンダリングを回避できます。サンプルは以下に記載されています path

  .products{
            display: -webkit-flex;
            -webkit-flex-flow: row;
            /*-webkit-justify-content: center;*/
        }
        .products > div{
            padding: 0 4em;
        }

結果は次のようになります。

+--- child_container ----+|
| child1 child2 child3  ch|ild4 child5  
|                         |
+------------------------+
12
user2364729

含まれているdivを含む残りすべてをフロートすると、機能します。

2
AlbertVo

今日の最新のソリューションは

#child_container {
    display: flex;
}

なぜならflex-wrapはデフォルトで

flex-wrap: nowrap;

このシンプルなソリューションは魅力のように機能します。そして今では、関連するすべてのブラウザでも。

1
Juuro