如何将 div 放置在包装在不同容器中的另一个 div 下答案

【问题标题】：How to position a div under another div wrapped in a different container如何将 div 放置在包装在不同容器中的另一个 div 下
【发布时间】：2016-01-30 00:03:27
【问题描述】：

是否可以将div#d2 直接定位在下面的每个标记的div#d1 容器下，而不是定位在包装器高度之外？

#wrapper {
  height: 100%;
  display: flex;
  background-color: steelblue;
  align-items: center;
  min-height: 100%;
  /* fallback style for browsers that do not support the `vh` unit */
  min-height: 100vh;
}
#d2 {
  margin-top: 0.25rem;
  text-align: center;
  background-color:#336712;
}

<body>
  <div id="wrapper">
    <div id="d1">lorem ipsum</div>
  </div> <!-- #wrapper -->
  <div id="d2">This should appear .25rem's under #d1 container</div>
</body>

这是我想要实现的目标的图片：

【问题讨论】：

怎么了？我不明白。
#d2 流动并出现在容器 #wrapper 之外。我想将它重新定位在 0.25rem 的正下方 #d1 下，它位于包装器内（即非父 div）。
您问题中代码块的父容器是什么？
我添加了 <body> 标签，根据您的参考 @Michael_B
顺便说一句，如果有聪明的 CSS 专家知道如何防止用户名和密码框被预先填充 - 你将真正成为 CSS 明星！（我的stackoverflow.com/questions/33367497/…）

标签： html css css-position flexbox

【解决方案1】：

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: steelblue;
}
#wrapper {
  display: flex;
}
#d2 {
  margin-top: 0.25rem;
  text-align: center;
  background-color: #336712;
}

<div id="wrapper">
  <div id="d1">lorem ipsum</div>
</div>
<!-- #wrapper -->
<div id="d2">This should appear .25rem's under #d1 container</div>

jsFiddle demo

【讨论】：

太棒了！！看起来很完美@Michael_B。让我集成到我的应用程序中，然后我会回复。谢谢！
当我这样做时，您能否在我的 OQ 下关于预填充字段的最新评论中摆脱您的 CSS 明星？谢谢...