html - 如何在屏幕底部进行div以及内联和重叠父div

Question

我如何让 div 显示在屏幕底部内联(像 facebook 聊天一样水平跟随)并重叠它们的父 div。我尝试了以下但不起作用。

<div id="container">
   <div id="box">
   </div>
   <div id="box">
   </div>
   <div id="box">
   </div>
</div>

#container{
   height:10px;
   position:fixed;
   bottom:0;
   width:1000px;
   margin:0 auto;
}
#box{
   border:1px solid blue;
   width:250px;
   height:300px;
   display:inline-table;
   position:fixed;
   bottom:0;
}

Answer 1

将元素包裹在另一个绝对定位的容器div中。

首先，您不能使用重复的 ID。请改用类。

您的 HTML 将类似于:

<div id="container">
    <div class="box-container">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
     </div>        
 </div>

您不能同时使用 display:inline-table 和 fixed。对容器 div 使用 position:absolute 或 position:fixed(如果你想让元素粘在一起)，例如对 .box 元素使用 display:inline-block 使它们内联。

#container {
   height:10px;
   position:fixed;
   bottom:0;
   width:1000px;
   margin:0 auto;
}

.box-container {
    position:absolute;
    bottom:0;
    height:40px;
    width:100%;
}

.box{
   border:1px solid blue;
   width:250px;
   height:40px;
   display:inline-block;
}

参见 http://jsfiddle.net/B228U/1/举个例子。

干杯，

杰伦