如何在父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？

回答

相關問題