使用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>

Answer 2

取决于您需要支持哪些浏览器。但更简洁的解决方案是尝试在CSS中模仿一些表格布局。

我没有机会用IE8 +彻底测试这个，但是大多数现代浏览器都可以处理CSS表布局属性，这样你就可以相对轻松地做这样的事情了。

因此...

CSS

.container { display: table-cell; vertical-align: bottom; height: 400px}

HTML

<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div>

唯一需要注意的是，如果你有两个＆＃34;容器＆＃34; div在代码中彼此跟随，而不是表格单元格（TD）并且彼此相邻。

如果你想要堆叠它们，那么你可以通过将容器包装在没有表格单元样式的div中，或者在其间粘贴另一个元素来解决这个问题......例如。

<div>
    <div class"container">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</div>
<div>
    <div class="container">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</div>

... OR

<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div>
<div></div>
<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div>