如何使背景適用於整個DIV

可能重複：
why is my content showing outside the div?如何使背景適用於整個DIV

我有一個問題，即對於一個div的背景樣式不面面俱到嵌套的DIV中。

這裏是一個jsfiddle到你到底顯示什麼我談論

我怎樣才能讓灰色背景的風格從DIV ddg-corner-statements適用於一切在div內沒有設置一個絕對的高度？

2012-10-12 novicePrgrmr

這是一個常見的問題與彩車工作時。有幾個常見的解決方案：

在浮動後添加一個div與clear: both。 Example。

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

浮點數添加與CSS屬性overflow: auto的容器。 Example。

<div style="overflow: auto"> 
    <div style="float: left"></div> 
    <div style="float: left"></div> 
</div>

使父元素浮動。 Example。

<div style="float: left"> 
    <div style="float: left"></div> 
    <div style="float: left"></div> 
</div>

使用：在CSS僞元素之後。 Example。

.parentelement:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

將設置高度添加到父元素。 Example。

<div style="height: 200px"> 
    <div style="float: left"></div> 
    <div style="float: left"></div> 
</div>

就個人而言，我使用的簡單性和語義的緣故選項2

見你的代碼here的更新版本。

來源

2012-10-12 13:15:33 jacktheripper

是的..你的選擇2是幫助我！ Thanx .. – matzone

我猜你想申請的灰色背景色的一切：My Fiddle

清除你的花車是這樣的：

<div style="clear: both;"></div> 
<div id="view-all-statements"><a href="ddg-statements.html">View All Statements →</a></div>

來源

2012-10-12 13:14:24

灰色背景似乎是一個圖像。嘗試垂直重複，看看會發生什麼。

來源

2012-10-12 13:15:53

這將解決問題YOUT：

> .ddg-corner-statements { 
>  padding: 10px 15px 1px; 
>  background: url("../images/bg_story_resources_bot.gif") repeat-x scroll left bottom transparent; 
>  display: inline-block; }

來源

2012-10-12 13:16:33

背景沒有被應用，因爲你的子元素是浮動的，並採取了流量。

.ddg-corner-sidebar ul li a { 
    border-bottom: 1px solid #DDDDDD; 
    border-top: 1px solid #F8F8F8; 
    color: #333333; 
    display: block; 
    float: left; 
    padding: 5px 0 9px; 
    width: 100%; 
}

如果您刪除float:left;，背景將按預期執行。

如果需要float:left，則需要清除浮標。

來源

2012-10-12 13:18:38 Jrod

如何使背景適用於整個DIV

回答

相關問題