如何获得一个div来包裹浮动的孩子？ [英] How do I get a div to wrap around floating children?

问题描述

考虑以下代码，其中 span 元素浮动在 div 内，如何 div 环绕浮动子元素，以便1px边框包裹子元素？

 < div style =border：1px solid＃000> 
< span style =float：left>内容< / span> 
< span style =float：left>内容< / span> 
< span style =float：left>内容< / span> 
< / div> 
  

解决方案

大多数时候，添加 overflow：hidden 包装器就足够了：

 < div style =border：1px固体＃000; overflow：hidden;> 
< span style =float：left>内容< / span> 
< span style =float：left>内容< / span> 
< span style =float：left>内容< / span> 
< / div>有时候，你会看到这种替代方法（这是更加hacky，但可能有更好的回来了）。    -version浏览器支持）。
 < div style =border：1px solid＃000;> 
< span style =float：left>内容< / span> 
< span style =float：left>内容< / span> 
< span style =float：left>内容< / span> 
< div style =clear：both;>< / div> 
< / div> 
  
 
Considering the following code, where the span elements are floating inside of the div, how can I make the div wrap around the floating child elements, so that the 1px border wraps the children elements?
<div style="border:1px solid #000">
  <span style="float:left">Content</span>
  <span style="float:left">Content</span>
  <span style="float:left">Content</span>
</div>

解决方案
Most of the time, adding overflow:hidden on the wrapper is sufficient:
<div style="border:1px solid #000; overflow:hidden;">
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
</div>
Sometimes, you'll see this alternate approach (which is much more hacky, but probably has better back-version browser support).
<div style="border:1px solid #000; ">
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <div style="clear:both;"></div>
</div>


                        
这篇关于如何获得一个div来包裹浮动的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！