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

Question

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

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

请注意，容器的高度不固定。

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 {
    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 3

将adInfoBox1的css更改为：

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

Answer 4

简单棘手的解决方案。 Div 2将位于容器Div的底部。

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