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

Question

我该如何将adInfoBox1置于容器底部？

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

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

- Banshee

---

adinfoBox1被设置为扩展到其容器的高度，因此从技术上讲它在容器的底部。至少在您提供的链接中是这样。 - edl

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/

- Intelekshual

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演示。

- David Thomas

Answer 3

简单巧妙的解决方案。Div2将位于containerDiv底部。

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

- yurin

Answer 4

将adInfoBox1的CSS更改为：

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

- Naftali