具有背景颜色的Div在具有预定宽度的Div内

Question

我觉得我应该能解决这个问题，但我真的做不到。。。

我基本上有一个div，它包含另一组div/元素。我希望这个容器中的第一个div有一个背景色，以便有效地为父div提供一个彩色的顶部条/部分。我能得到的最接近的是使用display：flex；给它涂上全高的颜色，但我不能按我想要的方式涂。感谢您的帮助。

.container {
border: 1px solid grey;
border-radius: 4px;
padding: 0px 10px 10px 10px;
}
.content {
height: 400px;
}
.sp-h3 {
display: flex;
background-color: #008ed0;
color: white;
}
* {
box-sizing: border-box;
}
.container::before,
.container::after {
content: "";
clear: both;
}

<div class="container">
<div class="sp-h3">
<h3>Bob McBob</h3>
</div>
<div class="content">
<p>Just for something</P>
<ul>
<li>The number 1</li>
<li>The number 2</li>
<li>The number 3</li>
<li>The number 4</li>
</ul>
</div>
</div>

Answer 1

您可以将padding设置为子元素，而不是将其设置为整个.container。

.container {
border: 1px solid grey;
border-radius: 4px;

}
.content {
height: 400px;
padding: 0px 10px 10px 10px;
}
.sp-h3 {
display: flex;
background-color: #008ed0;
color: white;
padding: 0px 10px 10px 10px;
}
* {
box-sizing: border-box;
}
.container::before,
.container::after {
content: "";
clear: both;
}

<div class="container">
<div class="sp-h3">
<h3>Bob McBob</h3>
</div>
<div class="content">
<p>Just for something</P>
<ul>
<li>The number 1</li>
<li>The number 2</li>
<li>The number 3</li>
<li>The number 4</li>
</ul>
</div>
</div>

Answer 2

您可以考虑在容器上进行简单的渐变着色，这样就不会出现与填充相关的问题：

.container {
border: 1px solid grey;
border-radius: 4px;
padding: 0px 10px 10px 10px;
background:
linear-gradient(to bottom,#008ed0 60px,transparent 0);
}
.content {
height: 400px;
}
.sp-h3 {
display: flex;
color: white;
}
* {
box-sizing: border-box;
}
.container::before,
.container::after {
content: "";
clear: both;
}

<div class="container">
<div class="sp-h3">
<h3>Bob McBob</h3>
</div>
<div class="content">
<p>Just for something</p>
<ul>
<li>The number 1</li>
<li>The number 2</li>
<li>The number 3</li>
<li>The number 4</li>
</ul>
</div>
</div>