如何使內聯塊父級的寬度纏繞在它的子級上？

Question

我有一個家長div與display: inline-block和兩個漂浮的孩子div s。當他們有足夠的空間放置在一起時，家長div的高度和寬度完全由孩子決定。

但是，當空間不足 - 使孩子包裝到下一行並且元素被垂直堆疊時，父級div的寬度保持不變，直到孩子堆疊之前，而不是適應最大尺寸兒童。

我該如何解決這個問題，所以父母仍然包裝而不是寬度過大？

見JSFiddle

<div id="parent"> 
<div></div> 
<div></div> 
</div> 

#parent { 
    display: inline-block; 
    border: solid 2px; 
    padding: 10px; 
    background-color: #aaaaaa; 
} 

div > div { 
    float: left; 
} 

div > div:first-child { 
    width: 200px; 
    height: 200px; 
    background-color: yellow 
} 

div > div:last-child { 
    width: 300px; 
    height: 300px; 
    background-color: blue; 
} 

Answer 1

這是由於未清除浮動數據而造成的，據我所知，沒有直接的解決方案可以在不使用JavaScript的情況下以完全響應的方式執行此操作。

但是具有固定尺寸，有一個方法，將清除浮紗和纏繞父：

http://jsfiddle.net/cfL491Lc/

@media screen and (max-width: 555px) { 
    div > div:last-child { 
     clear: left; 
    } 
} 

隨着以下邏輯：斷點= div的寬度+填充+餘量上body + 19px滾動條。

如果沒有滾動條存在，它會包裝太早，但這是媒體查詢的限制。根據周圍的內容（特別是總高度），可能需要另一個查詢。

Answer 2

我沒有收到你的問題。在其中，得到外div的高度和寬度的代碼都被內部的div

確定當水平堆疊：

外寬度=內寬度的總和 外高度=最大的內高度

<div style="width:auto;height:auto;display: inline-block; border: solid 2px; padding: 10px; background-color: #aaaaaa;"> 
 

 
    <div style="float: left; width: 200px; height: 200px; background-color: yellow;"> 
 
    </div> 
 

 
    <div style="float: left; width: 80px; height: 30px; background-color: blue;"> 
 
    </div> 
 

 

 
</div>

當垂直堆疊

外高度= SUM內高度 外寬度=最大淨寬

<div style="width:auto;height:auto;display: inline-block; border: solid 2px; padding: 10px; background-color: #aaaaaa;"> 
 

 
    <div style="float: left; width: 200px; height: 200px; background-color: yellow;"> 
 
    </div> 
 
<br> 
 
    <div style="float: left; width: 80px; height: 30px; background-color: blue;"> 
 
    </div> 
 

 

 
</div>

你想在這個改變的是什麼？