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>

答

这是由于彩车 - 他们不是 “盖” 的周围父元素。添加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>

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

答

这是因为使用了float。在这种情况下，请从全部删除float和clear，而不是使用float，您可以尝试margin-left作为第二个和第三个div。

答

#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.

感谢它很好.. –

不客气！你可以批准我的答案并解决问题。 – codechick

答

将<div style="clear:both;"></div>添加为RevWrapper中的最后一个div。

看起来好像有几个答案 –

div背景颜色不会填充格

相关推荐