Question

出于某种原因，我不能因为我的谎言弄清楚为什么div的背景颜色不会填充。我在div中有3张图片。但颜色只是略有下降。我找不到以前给我答案的帖子。

＆＃13;

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

＆＃13;

MonitoredTrainingSession

＆＃13;

Answer 1

这是由于浮动 - 它们没有被周围的父元素“覆盖”。将overflow: auto;添加到包装器以更改此行为：

#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%;
  overflow: auto;
}
#rev1 {
	clear: both;
	float: left;
	width: 33.3%;
	display: block;
	padding-bottom: 2%;
	padding-top: 2%;
}
#rev2 {
	clear: none;
	float: left;
	width: 33.3%;
	display: block;
	padding-bottom: 2%;
	padding-top: 2%;
}
#rev3 {
	clear: none;
	float: left;
	width: 33.3%;
	display: block;
	padding-bottom: 2%;
	padding-top: 2%;
}
.revimagecenter {    
    display: block;
	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>

Answer 2

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

Answer 3

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

Answer 4

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

div背景颜色不会填补div

4 个答案: