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

我试图将多个div放在位于0高度div内的页面底部，以便容器div不覆盖页面的一部分，因此拦截任何鼠标点击事件。截至目前，divs只从父div行（0高度父母）开始，向下而不是向上。从本质上讲，我试图复制facebook的即时聊天信使设置方式，尽管它可以作为跨浏览器兼容，但是，我在网上能够找到的所有内容都涉及到单个元素，堆叠元素（每个元素顶部其他）或使用各种方法，如display:table-cell或display:flex，这些方法不能与旧版IE浏览器兼容。在他们的父div的底部并排垂直对齐

如果您正在阅读本文，认为它不太适合兼容性问题（因为使用IE版本X和以前版本的人太少），那么您可以将兼容性问题抛出门外（只要它仍然是跨浏览器的）。

这是一个相当蹩脚的尝试，使视觉（无法找到一行将站在文本块的顶部，所以假设图像停止时，它是页面将结束的地方）。

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

谢谢。

来源

2015-11-05 Logan Hasbrouck

您可以：

显示的项目为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>

来源

2015-11-05 17:04:25 Oriol

谢谢你，伙计。 :) –

我刚才意识到，我该如何设置这个位置：fixed;'？我需要将它粘贴到屏幕底部，就像Facebook聊天一样。 –

@LoganHasbrouck然后使用'position：fixed; bottom：0' [demo]（http://jsfiddle.net/vt6jbtde/）。但是如果你把它从流程中拿出来，我就没有看到'高度：0'这一点。 – Oriol

类似的答案奥里奥尔。他/她排除了这个位置：就在绝对定位的容器上，但它与我所要做的相同，达99％。

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

创建您的大部分内容
将第一个容器内的绝对定位的容器
创建两个inline-block的项目一字排开一起

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

来源

2015-11-05 17:17:22 staypuftman

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

回答

相关问题