html - 使用 CSS 将包含 div 的 div 向下推

Question

我想在包含的 div (#container) 中构建一种 div(带有 .inner 类)的“堆栈”，其中每个内部被尽可能向下推到容器中而不与另一个内部重叠。我分别提供了一个和三个内部结构的插图:

我知道我可以通过设置...得到左边的结果

#container { position: relative; }

.inner {
   position: absolute;
   bottom: 0;
}

...但此解决方案不会扩展到右侧的示例 - 相反，它会导致所有内部结构相互重叠。有没有什么好方法可以通过 CSS 单独完成我想要的任意数量的内部？我知道我可以使用一些 hacky Javascript 来完成。

Answer 1

您可以为内部容器使用一个额外的容器，并使用您建议的技巧。

    <style>
 div{border:1px solid red}
 #container{height:1000px;}
 #inner-container{position:absolute;bottom:0px;}
 .inner {height:200px;width:200px;margin:5px;;
</style>


<div id="container">
 <div id="inner-container">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
 </div>
</div>