响应式 div 堆叠在彼此之上

Question

我想设置一个如下图所示的网页：

• 粉色框和白色框应保持在中心 1350 像素内
• 粉色框和白色框之间的距离是可变的，只要它保持在中心 1350 像素以内
• 当用户调整窗口大小时，黄色和蓝色框需要在垂直和水平方向上增长和缩小以填充整个空间（比例为 1:2）
• 粉红色框必须与黄色和蓝色边界重叠，蓝色范围内粉红色框的约 10-20%
• 白色和粉色不应重叠，并且在分辨率 > 992px 时应保持它们之间的最小距离

我尝试过的事情（几乎奏效）

• 使用网格布局，我能够在 1350 像素中心内正确间隔开粉色和白色项目。但是，黄色和蓝色框也没有超过 1350px 边界。 （因为我设置的是最大宽度）

• 使用 flexbox，我已经达到了黄色和蓝色水平/垂直拉伸的程度。但是，我不知道如何将粉色和白色框限制在中心 1350 像素内。有没有办法做到这一点？

<块引用>

// 我想在某处添加 max-width: 1350px

标记和样式

.container {
  display: flex;
  flex-direction: row-reverse;
  height: 100vh;
  width: 100%;
}
.yellow {
  background-color: gold;
  max-width: 33%;
  padding-top: 70px;
  
  flex-basis: 33%;
  flex-grow: 1;
  flex-shrink: 1;
}
.blue {
  background-color: skyblue;
  width: 66%;
  padding-top: 70px;
  
  flex-grow: 2;
  flex-shrink: 2;
}
.white {
  background-color: white;
  height: 400px;
  width: 300px;
  
  margin-right: auto;
  margin-left: 20%;
/*   left: 0px; */
}
.pink {
/*   background-color: hotpink; */
  height: 400px;
  width: 500px;
  
  margin-left: auto;
  margin-right: -350px;
/*   right: 0px; */
}

<div>
<div class="boundary">
<div>
  
<div class="container">
  <div class="blue">
    <div class="white"></div>
  </div>
  <div class="yellow">
    <div class="pink">
      <img src="https://cdn.psychologytoday.com/sites/default/files/styles/article-inline-half-caption/public/field_blog_entry_images/2018-09/cooldownpink.jpg?itok=-SDuFsdT" />
    </div>
  </div>    
  </div>
</div>
</div>

Link to Codepen

其他背景：

• 粉红色是固定比例和固定高度的图像（650px）
• white 是一个 HTML 元素
• 黄色和蓝色仅用于为背景着色

这能做到吗？响应式执行此操作的最佳方法是什么？谢谢！

Answer 1

这是一个 CSS 网格解决方案。我为黄色和蓝色使用了伪元素，因为它们仅用于背景着色：

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: max((100vw - 1350px)/2, 0px) repeat(8, 1fr) max((100vw - 1350px)/2, 0px);
}

body > *,
body::before,
body::after{
  grid-row: 1;
}

body::before {
  content:"";
  background: yellow;
  grid-column: 1/span 4;
}

body::after {
  content:"";
  background: blue;
  grid-column: span 6/-1;
}

.pink {
  background: pink;
  grid-column: 3/span 3;
  height: 60%;
  margin: auto 0;
  z-index:1;
}

.white {
  background: white;
  grid-column: 7/span 2;
  height: 40%;
  margin: auto 0;
  z-index:1;
}

<div class="pink"></div>
<div class="white"></div>