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跟随其容器的左边界。 div自然会从其容器的左上角开始（除非另外指定或受其影响）。您也不需要使用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>

左对齐div与居中容器

2 个答案: