div背景顏色不會填充格

由於某些原因，我不能爲我的謊言找出爲什麼div的背景顏色不填充。我在div中有3張圖片。但顏色只有一點點。我找不到以前的帖子給我答案。div背景顏色不會填充格

#RevWrapper { 
 
\t clear: both; 
 
\t margin: auto; 
 
\t max-width: 1232px; 
 
\t display: block; 
 
\t padding-left: calc((100% - 1232px)/2); 
 
\t padding-right: calc((100% - 1232px)/2); 
 
\t background-color: #006666; 
 
\t padding-bottom: 2%; 
 
} 
 
#rev1 { 
 
\t clear: both; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
#rev2 { 
 
\t clear: none; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
#rev3 { 
 
\t clear: none; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
.revimagecenter {  
 
    display: block; 
 
\t width: 85%; 
 
    margin-left: auto; 
 
    margin-right: auto 
 
}

<div id="RevWrapper"> 
 
    <div id="rev1"><img src="images/rev1.fw.png" alt="Review 1" class="revimagecenter"> 
 
    </div> 
 
    <div id="rev2"><img src="images/rev2.fw.png" alt="Review 2" class="revimagecenter"> 
 
    </div> 
 
    <div id="rev3"><img src="images/rev3.fw.png" alt="Review 3" class="revimagecenter"> 
 
    </div> 
 
</div>

來源

2017-08-14 Comp Stuff

這是由於彩車 - 他們不是「蓋」的周圍父元素。添加overflow: auto;到包裝上，以改變這種行爲：

#RevWrapper { 
 
\t clear: both; 
 
\t margin: auto; 
 
\t max-width: 1232px; 
 
\t display: block; 
 
\t padding-left: calc((100% - 1232px)/2); 
 
\t padding-right: calc((100% - 1232px)/2); 
 
\t background-color: #006666; 
 
\t padding-bottom: 2%; 
 
    overflow: auto; 
 
} 
 
#rev1 { 
 
\t clear: both; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
#rev2 { 
 
\t clear: none; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
#rev3 { 
 
\t clear: none; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
.revimagecenter {  
 
    display: block; 
 
\t width: 85%; 
 
    margin-left: auto; 
 
    margin-right: auto 
 
}

<div id="RevWrapper"> 
 
    <div id="rev1"><img src="images/rev1.fw.png" alt="Review 1" class="revimagecenter"> 
 
    </div> 
 
    <div id="rev2"><img src="images/rev2.fw.png" alt="Review 2" class="revimagecenter"> 
 
    </div> 
 
    <div id="rev3"><img src="images/rev3.fw.png" alt="Review 3" class="revimagecenter"> 
 
    </div> 
 
</div>

來源

2017-08-14 19:37:37 Johannes

這是你的答案！可悲@Johannes打敗了我：P –

這是因爲使用了float。在這種情況下，請從全部刪除float和clear，而不是使用float，您可以嘗試margin-left作爲第二個和第三個div。

來源

2017-08-14 19:39:13

#RevWrapper { 
    clear: both; 
    margin: auto; 
    max-width: 1232px; 
    display: block; 
    padding-left: calc((100% - 1232px)/2); 
    padding-right: calc((100% - 1232px)/2); 
    background-color: #006666; 
    padding-bottom: 2%; 
} 
#rev1 { 
    clear: both; 
    float: left; 
    width: 33.3%; 
    display: block; 
} 
#rev2 { 
    clear: none; 
    float: left; 
    width: 33.3%; 
    display: block; 
} 
#rev3 { 
    clear: none; 
    float: left; 
    width: 33.3%; 
    display: block; 
} 
.revimagecenter {  
    display: block; 
    width: 85%; 
    margin-left: auto; 
    margin-right: auto 
} 

Remove the padding.

來源

2017-08-14 19:39:41 codechick

感謝它很好.. –

不客氣！你可以批准我的答案並解決問題。 – codechick

將<div style="clear:both;"></div>添加爲RevWrapper中的最後一個div。

來源

2017-08-14 19:42:51 user2215732

看起來好像有幾個答案 –

div背景顏色不會填充格

回答

相關問題