展開div容器與內容寬度

我在我的應用程序的結構如下：展開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 | 
+-----------------------------+

感謝。

來源

2011-05-24 Andre

請提供一些代碼。在小提琴中更好。 – Andre 2011-05-24 18:55:43

它是這樣的：http://jsfiddle.net/8XGqs/ – Andre 2011-05-24 19:51:12

http://jsfiddle.net/8XGqs/1/說明等效的ascii藝術以上更好，我認爲。剛添加寬度：100％到#container。 – Andre 2011-05-24 19:59:51

像這樣的東西應該工作：

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

來源

2011-05-24 19:04:54 wajiw

爲什麼'位置：相對'？ – thirtydot 2011-05-24 19:10:52

@thirtydot因爲某些瀏覽器呈現html。不告訴它的位置有些瀏覽器將不使用「子」元素的大小，以增加集裝箱 – wajiw 2011-05-24 19:13:38

這是好事的大小...儘管你可能不需要'的位置是：相對;' – 2011-05-24 19:15:42

如果您將所有剩下的東西浮起來，包括包含div，它就會起作用。

來源

2011-05-24 18:58:14 AlbertVo

即使簡單：

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

來源

2012-05-02 18:09:53

我只是希望，IE7沒有拋出一個合適的，每次使用該語句... – dkroy 2012-05-18 16:20:07

易於處理這個[回答]（http://stackoverflow.com/questions/ 6544852/ie7-problem-with-display-inline-block） – 2012-05-21 19:53:39

-7

剛剛設置的父的寬度到120％，做=）

來源

2012-05-04 11:39:26 matmancini

這將允許更多的元素，更多東西進來？ – 2013-07-05 09:17:43

的父容器贏得」在增加子元素時增長。

+------ 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 
|       | 
+------------------------+

來源

2013-07-05 09:02:15 user2364729

展開div容器與內容寬度

回答

相關問題