CSS包裝DIV不工作

-1

在這撥弄我累了環繞所有其它的div一個div，並給它的背景顏色。可惜這不符合預期，它像包裝div不存在。這個小提琴有什麼問題？所有div應放置在灰色框中，即包裝div的背景顏色。

<div class="wrap"> 

<div class="line">a</div> 
<div class="line">b</div> 
<div class="line">c</div> 
<div class="line">d</div> 

<div class="first">e</div> 
<div class="line">f</div> 
<div class="line">g</div> 

</div>

CSS

div.wrap {background-color:#CFCFCF;} 

div.line {float:left;background-color:#00FF00; margin:5px; } 
div.first {clear:both; float:left; margin:5px;}

來源

2014-07-18 cli

您可以添加display: inline-block到.wrap

來源

2014-07-18 13:24:02 Quince

這工作甚至更好。我喜歡它比溢出更好：隱藏。 – cli

@cli是否解決了您的問題？ – Quince

是的，這工作正常，我接受這個答案。 – cli

你只需要清除浮動元素。要做到這一點只需添加overflow: hidden您.wrap

來源

2014-07-18 13:18:05 mattcouchman

是的，這樣的作品，雖然我不明白爲什麼。 – cli

克里斯科伊爾在這裏解釋它比我能在這裏更好http://css-tricks.com/all-about-floats/ – mattcouchman

清除您的元件，因此說，父母應的div包裹一切裏面是添加的最徹底的方法最後清除div。

默認情況下，當您在其中添加浮動元素時，包裝器維度不會更新。但是，當你清除它們時，尺寸更新將達到最後清除/浮動元素的末尾。

<div style="clear: both"></div>

在這裏看到的DEMO：http://jsfiddle.net/xVNN9/5/

來源

2014-07-18 13:33:40

這也是一個很好的方法。我喜歡展示：內嵌塊最多，但這也非常好。但是，我真的不明白這是如何工作的。 – cli

CSS包裝DIV不工作

回答

相關問題