如何在父div的框架内保持浮动div？

我有一个div，其中包含几个其他div设置float：left。现在，我想周围所有的人的框架，所以我把边框父DIV，但浮动一“流”出来的帧的...如何在父div的框架内保持浮动div？

CSS：

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
}

HTML：

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
</div>

我能做些什么（在CSS中）让他们在父框架内？

来源

2012-01-26 Cedric Reichenbach

添加overflow: hidden到父<div> - http://jsfiddle.net/5AVA8/

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
    overflow: hidden; 
}

来源

2012-01-26 11:00:16

只是出于兴趣是什么在明确DIV这样做的好处？这只是没有新的标志吗？ – SpaceBeers

@SpaceBears确切地说，对于这样的简单事情，它比'clearfix'更适合。 –

谢谢。很高兴知道。 – SpaceBeers

必须 '清除浮动'，也有 '浮动清理' 的各种方法。一些解决方案只涉及CSS，我的首选解决方案（有些人不喜欢，因为它增加了额外的标记）是添加一个“清算股利”，其工作原理如下：

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
    <div style="clear:both"></div> 
</div>

请参阅从最后一行中的第二个。

来源

2012-01-26 11:02:07 IsisCode

你没有清理浮游物。如果您将代码更改为此，它将解决您的问题。

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
} 

.clear { 
    clear: both; 
} 

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 

    <div class="clear"></div> 
</div>

看到我已经在这里设置的例子 - http://jsfiddle.net/spacebeers/RQNDr/

有关clear属性的详细信息 - http://css.maxdesign.com.au/floatutorial/

来源

2012-01-26 11:02:11 SpaceBeers

如何在父div的框架内保持浮动div？

回答

相关问题