Question

我正在尝试在位于0高度div内的页面底部放置多个div，以便容器div不会覆盖页面的一部分，从而拦截任何鼠标点击事件。截至目前，div仅从父div线（0高度父线）开始向下而不是向上。从本质上讲，我试图复制facebook的即时聊天信使的设置方式，虽然它可以作为跨浏览器兼容，但是，我能够在网上找到的所有内容都与单个元素，堆叠元素相关（在每个元素的顶部）其他）或使用各种方法，如display:table-cell或display:flex，它们与旧版本的IE不具有跨浏览器兼容性。

如果您正在阅读本文，则认为兼容性方面的问题很少（因为很少有人使用IE版本X及之前版本），那么您可以将兼容性问题抛到脑后（只要它仍然存在）跨浏览器）。

这是一个相当蹩脚的尝试制作视觉效果（无法找到一条位于文本块顶部的线，所以假设当图像停止时它就是页面结束的位置）。

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

感谢。

Answer 1

你可以：

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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;
}

在父div的底部并排垂直对齐div

2 个答案: