将 div 左对齐到居中的容器

Question

我有一个以最大宽度为中心的容器，如下所示：

#container {
   margin-left: auto;
   margin-right: auto;
   max-width: 900px;
}

现在我想在包含的 div 下方创建一个新 div，但我希望这个新 div 与左侧对齐并扩展到容器右侧之外。类似的东西：

            ||||||||||||||||||||||||||||||||||||                                #container
            |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||     #div 2

困难在于#container 边距是auto，那么当浏览器调整大小时，如何强制#div 跟随#container 左边距？！

注意：我正在寻找一个没有 JAVASCRIPT 的纯 CSS 解决方案

编辑：我的解释不清楚，但我的目标是使#div 与#container 相邻。像这样：

<div id="container"></div>

<div id="div"></div>

我最终重构了我的 html 以使用带有 absolute 定位的 @bananabran 解决方案，它仅使用父子结构：

<div id="container">
    <div id="div"></div>
</div>

Answer 1

您不必强制 div 跟随其容器的左边距。 Divs 自然地从其容器的左上角开始（除非另有说明或受其影响）。您也不需要使用 Grid 或 FlexBox。 CSS3，甚至 CSS2 都可以原生地做到这一点。

查看工作中的 CodePen 示例：https://codepen.io/bananabrann/pen/QWWdXQZ

假设您没有其他代码影响您的代码...

<div id="container" />
  <div id="my-div" />

#container {
  background-color: blue;
  position: relative;
  margin: 0 auto;
  width: 900px;
  height: 300px;
}
#my-div {
  background-color: red;
  position: absolute;
  bottom: 0;
  width: 500px;
  height: 20px;
}

Answer 2

CSS-Grid 可以做到这一点：

.wrap {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 400px) 1fr;
  /* 400px for demo purposes */
}

.container {
  padding: 1em;
  background: pink;
  grid-column-start: 2;
}

.wide-r {
  padding: 1em;
  background: lightgreen;
  grid-column: 2 / span 2;
}

<div class="wrap">
  <div class="container">Container
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, similique, maxime aspernatur dolorum quod recusandae possimus fuga blanditiis laudantium delectus quis magni. Veniam, consequuntur dolores facilis cupiditate fugiat ullam aspernatur!
      Corporis excepturi quos esse voluptatem voluptatibus corrupti ea, tempora culpa magni, hic aspernatur pariatur molestias itaque doloremque assumenda ad fugiat!</p>
  </div>
  <div class="wide-r">Wide Right</div>
</div>