Html 如何将 div 放在另一个 div 的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5344438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place div at the bottom of another div?
提问by Banshee
How do I place the adInfoBox1at the bottom of the container?
如何将 放在adInfoBox1容器底部？
Take a look at this: http://jsfiddle.net/snowman/hxXJh/
看看这个：http: //jsfiddle.net/snowman/hxXJh/
Please note that the container will not have a fixed height.
请注意，容器不会有固定的高度。
回答by Intelekshual
You can use position: absolute.
您可以使用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;
}
See a working example here: http://jsfiddle.net/hxXJh/5/
在此处查看一个工作示例：http: //jsfiddle.net/hxXJh/5/
回答by David says reinstate Monica
I'd suggest:
我建议：
.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;
}
The above will give the .adInfoBox100% width, implicitly. This can be adjusted by removing, or amending, the rightor leftdeclarations. I removed the floatbecause using position: absolute;will take the element out of the document flow anyway.
以上将.adInfoBox隐含地给出100% 的宽度。这可以通过删除或修改right或left声明来调整。我删除了float因为 usingposition: absolute;无论如何都会将元素从文档流中删除。
回答by yurin
Simple tricky solution. Div2 will be at the bottom of containerDiv.
简单棘手的解决方案。Div2 将位于 containerDiv 的底部。
<div id="containerDiv">
<div id="div1" style="heigth:90%;"></div>
<div id="div2">Content here...</div>
</div>
回答by Naftali aka Neal
change the css of adInfoBox1to:
将 css 更改adInfoBox1为：
.adInfoBox1 {
float: left;
padding: 5px 5px 5px 10px;
position: absolute;
width: 457px;
background-color : green;
bottom: 0;
}
