如何让背景色覆盖整个div?
How to make the background-color cover the whole div?
我正在尝试将背景色添加到 div 中,其中包含另外两个 div。但是背景颜色并没有一直停留在两个 div 下。
两个 div 在我添加背景的 div 里面,所以我认为背景应该在两个 div 的下方或旁边结束。
.characters {
margin: 0;
border: 5px solid black;
float: left;
width: 50%;
box-sizing: border-box;
}
.characters img {
width: 100%;
height: auto;
display: block;
border-bottom: 5px solid black;
}
.infos {
background-color: gray;
padding: 35px;
text-align: center;
}
.infos h2, .infos h3 {
margin: 0;
}
.page {
margin-top: 35px;
padding: 10px;
background-color: lightgray;
}
<div class="page">
<div class="characters">
<img src="pic.jpg" alt="pic" width="100px" height="100px"/>
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="characters">
<img src="pic.jpg" alt="pic1" width="100px" height="100px"/>
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
</div>
使 .characters
元素变成浅灰色,而不是 .page
元素:
.characters {
margin: 0;
border: 5px solid black;
float: left;
width: 50%;
box-sizing: border-box;
background: lightgray;
}
.characters img {
width: 100%;
height: auto;
display: block;
border-bottom: 5px solid black;
}
.infos {
background-color: gray;
padding: 35px;
text-align: center;
}
.infos h2,
.infos h3 {
margin: 0;
}
.page {
margin-top: 35px;
padding: 10px;
}
<div class="page">
<div class="characters">
<img src="pic.jpg" alt="pic" width="100px" height="100px" />
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="characters">
<img src="pic.jpg" alt="pic1" width="100px" height="100px" />
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
</div>
您需要清除浮动...
一种方法是将 overflow:auto
应用于父项。
.page {
overflow: auto;
}
.characters {
margin: 0;
border: 5px solid black;
float: left;
width: 50%;
box-sizing: border-box;
}
.characters img {
width: 100%;
height: auto;
display: block;
border-bottom: 5px solid black;
}
.infos {
background-color: gray;
padding: 35px;
text-align: center;
}
.infos h2,
.infos h3 {
margin: 0;
}
.page {
margin-top: 35px;
padding: 10px;
background-color: lightgray;
}
<div class="page">
<div class="characters">
<img src="pic.jpg" alt="pic" width="100px" height="100px" />
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="characters">
<img src="pic.jpg" alt="pic1" width="100px" height="100px" />
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
</div>
这是因为
.characters {
float: left;
}
属性.
只需在 .page 中添加一个空 div 并添加 CSS clear: both 属性 如下所示。
<div class="page">
<div class="characters">
<img src="pic.jpg" alt="pic" width="100px" height="100px"/>
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="characters">
<img src="pic.jpg" alt="pic1" width="100px" height="100px"/>
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="empty"></div>
</div>
答案是
.empty{
clear: both;
}
.characters {
margin: 0;
border: 5px solid black;
float: left;
width: 50%;
box-sizing: border-box;
}
.characters img {
width: 100%;
height: auto;
display: block;
border-bottom: 5px solid black;
}
.infos {
background-color: gray;
padding: 35px;
text-align: center;
}
.infos h2, .infos h3 {
margin: 0;
}
.page {
margin-top: 35px;
padding: 10px;
background-color: lightgray;
}
我用这个技术。这可能不是正确的方法,但会对您有所帮助。另外,记得关闭 .page class div 标签。 :)
我正在尝试将背景色添加到 div 中,其中包含另外两个 div。但是背景颜色并没有一直停留在两个 div 下。
两个 div 在我添加背景的 div 里面,所以我认为背景应该在两个 div 的下方或旁边结束。
.characters {
margin: 0;
border: 5px solid black;
float: left;
width: 50%;
box-sizing: border-box;
}
.characters img {
width: 100%;
height: auto;
display: block;
border-bottom: 5px solid black;
}
.infos {
background-color: gray;
padding: 35px;
text-align: center;
}
.infos h2, .infos h3 {
margin: 0;
}
.page {
margin-top: 35px;
padding: 10px;
background-color: lightgray;
}
<div class="page">
<div class="characters">
<img src="pic.jpg" alt="pic" width="100px" height="100px"/>
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="characters">
<img src="pic.jpg" alt="pic1" width="100px" height="100px"/>
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
</div>
使 .characters
元素变成浅灰色,而不是 .page
元素:
.characters {
margin: 0;
border: 5px solid black;
float: left;
width: 50%;
box-sizing: border-box;
background: lightgray;
}
.characters img {
width: 100%;
height: auto;
display: block;
border-bottom: 5px solid black;
}
.infos {
background-color: gray;
padding: 35px;
text-align: center;
}
.infos h2,
.infos h3 {
margin: 0;
}
.page {
margin-top: 35px;
padding: 10px;
}
<div class="page">
<div class="characters">
<img src="pic.jpg" alt="pic" width="100px" height="100px" />
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="characters">
<img src="pic.jpg" alt="pic1" width="100px" height="100px" />
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
</div>
您需要清除浮动...
一种方法是将 overflow:auto
应用于父项。
.page {
overflow: auto;
}
.characters {
margin: 0;
border: 5px solid black;
float: left;
width: 50%;
box-sizing: border-box;
}
.characters img {
width: 100%;
height: auto;
display: block;
border-bottom: 5px solid black;
}
.infos {
background-color: gray;
padding: 35px;
text-align: center;
}
.infos h2,
.infos h3 {
margin: 0;
}
.page {
margin-top: 35px;
padding: 10px;
background-color: lightgray;
}
<div class="page">
<div class="characters">
<img src="pic.jpg" alt="pic" width="100px" height="100px" />
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="characters">
<img src="pic.jpg" alt="pic1" width="100px" height="100px" />
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
</div>
这是因为
.characters {
float: left;
}
属性.
只需在 .page 中添加一个空 div 并添加 CSS clear: both 属性 如下所示。
<div class="page">
<div class="characters">
<img src="pic.jpg" alt="pic" width="100px" height="100px"/>
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="characters">
<img src="pic.jpg" alt="pic1" width="100px" height="100px"/>
<div class="infos">
<h2>text</h2>
<h3>text</h3>
</div>
</div>
<div class="empty"></div>
</div>
答案是
.empty{
clear: both;
}
.characters {
margin: 0;
border: 5px solid black;
float: left;
width: 50%;
box-sizing: border-box;
}
.characters img {
width: 100%;
height: auto;
display: block;
border-bottom: 5px solid black;
}
.infos {
background-color: gray;
padding: 35px;
text-align: center;
}
.infos h2, .infos h3 {
margin: 0;
}
.page {
margin-top: 35px;
padding: 10px;
background-color: lightgray;
}
我用这个技术。这可能不是正确的方法,但会对您有所帮助。另外,记得关闭 .page class div 标签。 :)