如何使内联块父级的宽度缠绕在它的子级上？

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>

你想在这个改变的是什么？