html - 将子 div 扩展到一侧

Question

我正试图通过我的网站完成一些我很难在 Google 搜索中使用措辞的事情。我有一个容器 div 位于一个 section 元素内，该元素扩展到页面的整个宽度。我希望容器宽度延伸到左侧，而右侧永远不会超出特定点。

这是我现有的代码:

html

<section>
   <div class="container">
   </div>
</section>

CSS

section{
    width: 100%;
    margin: auto;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

这导致 container div 相对于 section 元素居中。随着浏览器宽度的改变，container 的左右边界保持不变。

现在我想扩展 container 的左侧，而右侧保持不变。我该怎么做？

这个的关键部分是让容器的右侧保持在相对于该部分中心的位置，所以即使浏览器的宽度变化，右边不动。

我这样做的原因是我可以将背景图像放在 container 上并让它扩展到页面的左侧。

编辑:我还必须能够将元素放入容器内并让它们到达右边缘，因此填充将不起作用。

Answer 1

如果我正确理解了你的问题，这可能有效:

.container{
    width: 1200px;
    padding-right: calc(50% - 600px);
}