CSS将一些元素堆叠到底部答案

【问题标题】：CSS to stack some elements to the bottomCSS将一些元素堆叠到底部
【发布时间】：2014-05-27 20:05:21
【问题描述】：

我有一个包含此 HTML 的页面

<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
... variable amount of divs

我想创建这个布局，其中页面是 100% 高和宽。前两个 div 应该在顶部，后面的所有 div 都堆叠在底部。

div 是自动生成的 - 我不能区别对待前两个（仅在样式表中）。

我怎样才能做到这一点？我只需要支持最新版本的 Chrome 和 Chromium。

--------------------------
| ----------  ---------- |
| | div 1  |  |  div 2 | | <-- aligned to top of page
| |        |  |        | |
| ----------  ---------- |
|                        |
|                        | <-- variable space
|                        |
| ----------------       |
| |    div 3     |       |
| ----------------       | <-- aligned to bottom of page
| ----------------       |
| |    div 4     |       |
| ----------------       |
--------------------------

【问题讨论】：

你有什么尝试吗？

标签： css google-chrome chromium

【解决方案1】：

您可以使用:nth-child 定位前两个 div 并将它们堆叠成一行，并将其余的堆叠在底部..

【讨论】：

我知道第 n 个子选择器。你能举一个“把其余的堆放在底部”的例子吗？
查看示例in JSFiddle，添加越来越多的div也没关系，只会影响前两个，其余的会在它们之后堆叠。
div 不在底部。我已经改进了我的问题，以便更清楚地解释我想要实现的目标。
你为那个 div 使用容器？

【解决方案2】：

遍历页面上的 div。 Jquery 可以很容易地做到这一点。

$('div').each(function(i, elem) {
     //do something with the current 'elem'.
     //How do I know if its the first and 2nd div?
   if(i==1||i==2)
   {
   //This must be the first 2 divs  

}
   });

编辑：我会补充一点，这是一种不好的方法，但很容易遵循 IMO。假设您有 1000 个 div，您遍历所有 div 只是为了处理一些，等等。

再次编辑：所以当我说//做某事时，我会做 $(item).addClass('customCSS')。这将允许您定位这些 div，无论它们是如何生成的。希望这会有所帮助

【讨论】：

我正在寻找 CSS 解决方案。 div 由 angularjs ng-repeat 生成。这不适合你的方法。

【解决方案3】：

试试这个代码：

div:first-child{
   width: 50%;
   float: left;
}

div:nth-child(2){
   width: 50%;
   float: left;
}

div:nth-child(3){
   width: 100%;
   clear:both;
}

div:last-child{
   width: 100%;
   clear:both;
}

并按照这个模式处理你拥有的所有 div

【讨论】：

我需要将它们堆叠到底部，否则会很容易。

【解决方案4】：

似乎不可能按照我想要的方式去做。我将区别对待顶部和底部 div（我想避免这种情况）并将这两个组包装在它们自己的容器中，如下所示：

HTML

<div id="top">
    <div><h1>1</h1></div>
    <div><h1>2</h1></div>
</div>

<div id="bottom">
    <div><h1>3</h1></div>
    <div><h1>4</h1></div>
    <div><h1>5</h1></div>
    <div><h1>6</h1></div>
</div>

CSS

#top div {
    width: 50%;
    float: left;
}

#bottom {
    position: absolute;
    bottom: 0;
}

【讨论】：