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

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

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

Answer 2

您可以将x = np.arange(0,2400,1, dtype=np.int32) plt.plot(x,np.power(x,3))设置为子元素，而不是将其设置为整个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，且Div具有预定宽度

2 个答案: