html - 如何创建此布局？ child 比 parent /填充/flexbox 宽？

Question

我确信这很简单，但我正在努力理解它。

我有两个 div。标题 div 最大宽度 500px。主 div 最大宽度 400px。主 div 应在浏览器窗口中水平居中。标题 div 的左边缘需要与主 div 的左边缘对齐。见下文。红线是浏览器窗口的中心:

我通过添加一个最大宽度为 500 像素(粉红色)的包装 div 并在左侧使用额外的填充来实现这一点。这在一定程度上起作用。但在较小的屏幕尺寸下，左侧的额外填充会使布局偏离中心。

那么我该如何创建这个布局呢？我假设我不能将标题 div 添加为主 div 的子级，因为子级不能比其父级宽。我猜 flexbox 可能是答案，但我从未使用过 Flexbox。

这是我目前的代码: https://jsfiddle.net/aqpyzogc/

 <div class="wrapper">
    <div class="heading"></div>
    <main></main>   
</div>


.wrapper {
    max-width:500px;
    margin:0 auto; 
    padding:0 0 0 100px;
    background-color:lightpink;
    }

.heading {
    max-width:500px;
    background-color:cyan;
    height:100px;
    }


main {
    max-width:400px;
    background-color:grey;
    height:500px;
    }

Answer 1

But at smaller screen sizes the extra padding on the left knocks the layout off center.

您可以使用 calc() 函数计算这些视口(viewport)尺寸的正确填充量。

低于 600px 的视口(viewport)宽度，剩余空间为 100% 减去 400px，我们需要其中一半用于 padding-left，所以:

body {
  margin: 0;
}

.wrapper {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 0 0 100px;
  background-color: lightpink;
}

@media (max-width: 600px) {
  .wrapper {
    padding-left: calc((100% - 400px) / 2);
  }
}

.heading {
  max-width: 500px;
  background-color: cyan;
  height: 100px;
}

main {
  max-width: 400px;
  background-color: grey;
  height: 500px;
}

<div class="wrapper">
  <div class="heading"></div>
  <main></main>
</div>

我在这里也将正文边距设置为 0，以便整个内容符合 600px 断点。如果您需要这些额外的边距，则必须在断点值计算中将它们计算在内。

fiddle :https://jsfiddle.net/aqpyzogc/1/