如何让背景色覆盖整个div？

Question

我正在尝试向其中包含另外两个 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>

Answer 1

您需要清除浮动...

一种方法是将 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>

Answer 2

这是因为

.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 类的 div 标签。 :)

Answer 3

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