将div并排垂直排列在其父div的底部

Question

我试图在页面底部放置多个div，这些div位于0高度的div内，这样容器div就不会覆盖页面的一部分，从而拦截任何鼠标单击事件。到目前为止，div只从父div行（0高度的父div）开始，向下而不是向上。从本质上讲，我试图复制脸书设置即时聊天信使的方式，同时尽可能地跨浏览器兼容。然而，我在网上找到的所有东西都与单个元素、堆叠元素（在彼此之上）有关，或者使用各种方法，如display:table-cell或display:flex，这些方法与旧版本的IE不兼容。

如果你正在阅读这篇文章，认为这在兼容性方面不会有什么问题（因为很少有人使用IE版本X及之前的版本），那么你可以把兼容性问题排除在外（只要它仍然是跨浏览器的）。

这是一个相当糟糕的视觉尝试（找不到一行可以站在文本块的顶部，所以假设当图像停止时，它就是页面的终点）。

______________
|            |
|            |
|            |
|            |
|            |
|       ___  |
|  __  |   | |
| |  | |   | |

谢谢。

Answer 1

您可以：

• 将项目显示为inline-block以水平堆叠它们
• 使用vertical-align: bottom将其底边与线条框的底部对齐
• 考虑使用white-space: nowrap强制它们停留在单行框中
• 将它们放置在带有bottom: 0的绝对定位的内部包装中，即放置在其包含块的底部
• 将内包装放入相对定位的外包装中

#outer-wrapper {
  height: 0;
  border: 1px solid;
  position: relative;
  margin-top: 70px;
}
#inner-wrapper {
  position: absolute;
  bottom: 0;
}
.item {
  display: inline-block;
  height: 30px;
  width: 40px;
  border: 1px solid blue;
  vertical-align: bottom;
}
.bigger.item {
  height: 50px;
}

<div id="outer-wrapper">
  <div id="inner-wrapper">
    <div class="item"></div>
    <div class="bigger item"></div>
  </div>
</div>

Answer 2

类似于Oriol的答案。他/她遗漏了位置：就在绝对定位的集装箱上，但这与我要做的99%相同。

演示：http://codepen.io/staypuftman/pen/YyOaBo

• 创建一个相对定位的容器，其中包含您的大部分内容
• 在第一个容器中放置一个完全定位的容器
• 创建两个排列在一起的内联块项目

HTML:

<div class="master-box">
  <div class="bottom-box-container">
    <div class="bottom-box-1">
    </div>
    <div class="bottom-box-2">
    </div>
  </div>
</div>

CSS：

.master-box {
  background-color: #b3d9ff;
  height: 400px;
  position: relative;
  width: 800px;
}
.bottom-box-container {
  position: absolute;
  bottom: 0;
  right: 0;
}
.bottom-box-1 {
  border: 1px solid #000;
  background-color: #ffedb3;
  display: inline-block;
  height: 200px;
  vertical-align: bottom;
  width: 200px;
}
.bottom-box-2 {
  border: 1px solid #000;
  background-color: #feb3ff;
  display: inline-block;
  height: 200px;
  vertical-align: bottom;
  width: 200px;
}