如何將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>