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

您无法为不同的元素提供相同的ID。使用课程。同时给出主div位置：relative和float：left to rhe class box。像这样：

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


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

http://jsfiddle.net/7kwLc/

Answer 2

将元素包装在另一个绝对定位的容器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并将其固定在一起。使用position：absolute或position：fixed（如果你想使项目坚持）为容器div，例如display：inline-block for .box elements to get itline。

#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/。

干杯，

的Jeroen

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

2 个答案: