如何让背景色覆盖整个 div？ [复制]答案

【问题标题】：How to make the background-color cover the whole div? [duplicate]如何让背景色覆盖整个 div？ [复制]
【发布时间】：2021-07-12 09:14:14
【问题描述】：

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

【问题讨论】：

@DrJManish 谢谢你的讲述。添加了 html 和 css 代码。其中是否有任何错误或需要添加的代码？提前谢谢你！
所以你想让整个东西都是浅灰色的吗？
@pineapplerind0215 是的，这就是我想要的。有办法吗？
@Airi 是的，看我的回答
这样？ - ibb.co/mcVYmw9

标签： html css background-color

【解决方案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>

【讨论】：

【解决方案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 class div 标签。 :)

【讨论】：

很酷的技术！成功了，谢谢你的回答！
不客气...！

【解决方案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>

【讨论】：

我的意思是背景（在他们背后，不仅仅是内部）。有办法吗？