如何将div放在另一个div的底部？

Question

嗨，

普莱斯看看这个：http://jsfiddle.net/snowman/hxXJh/

如何放置adInfoBox1在容器的底部？

请注意容器没有固定的高度。

BestRegards 强大的文本

Answer 1

您可以使用position: absolute。

.container 
{ 
    height: 400px; 
    position: relative; 
} 

.adInfoBox1 { 
    padding: 5px 5px 5px 10px; 
    position: absolute; 
    bottom: 0px; 
    width: 457px; 
    background-color: green; 
} 

.adRegularList .categoryList { 
    bottom: 0; 
    height: 16px; 
    position: absolute; 
} 

看到这里工作的例子：http://jsfiddle.net/hxXJh/5/

Answer 2

变化adInfoBox1的CSS：

.adInfoBox1 { 
    float: left; 
    padding: 5px 5px 5px 10px; 
    position: absolute; 
    width: 457px; 
    background-color : green; 
    bottom: 0; 
} 

Answer 3

我建议：

.adInfoBox1 { 
    padding: 5px 5px 5px 10px; 
    position: absolute; 
    bottom: 0; /* attaches the element to the bottom */ 
    left: 0; /* attaches the element to the left-side */ 
    right: 0; /* attaches the element to the right-side */ 
    background-color : green; 
} 

以上将给.adInfoBox隐含的100％宽度。这可以通过删除或修改right或left声明进行调整。我删除了float，因为使用position: absolute;无论如何都会将该元素从文档流中取出。

JS Fiddle demo。

Answer 4

简单棘手的解决方案。 Div2将位于containerDiv的底部。

<div id="containerDiv"> 
    <div id="div1" style="heigth:90%;"></div> 
    <div id="div2">Content here...</div> 
</div>