html - 如何让两个 div 并排放置，它们的背景跨越整个宽度，但它们的内容包含在一个包装内？

Question

Example image of what I'm trying to accomplish

我正在尝试并排设置两个 flex 的 div。背景横跨整个宽度且内容包含在换行中的位置。

<div class="flex-grid">
    <div class="flex-child">
        <p class="flex-child__content">content goes here</p>
    </div>
    <div class="flex-child">
        <p class="flex-child__content">content goes here</p>
    </div>
</div>

因此 flex-grid 将显示为 display:flex 并且 flex-child div 将被调整为 50%。 flex-child__content 将位于容器中，例如:

wrap { width: 1024px; margin: 0 auto; }

最好的方法是什么？

Answer 1

您可以使用 flex-grid，在网格上分配每个 div 将填充的空间，您可以尽情使用它。

.flex-grid {
  background: #f00;
  display: grid;
  grid-template-columns: auto 512px 512px auto;
  grid-template-areas: 
    "space1 left right space2";
}
.flex-child {
  text-align:center;
}
.space1, #left {
  background: #0f0;
}
.space2, #right {
  background: #00f;
}
.space1 {
  grid-area: space1;
}
.space2 {
  grid-area: space2;
}
#left {
  grid-area: left;
}
#right {
  grid-area: right;
}

<div class="flex-grid">
  <div class="space1"></div>
    <div class="flex-child" id="left">
        <p class="flex-child__content">content goes here</p>
    </div>
    <div class="flex-child" id="right">
        <p class="flex-child__content">content goes here</p>
    </div>
  <div class="space2"></div>
</div>