Question

我尝试在父div的底部对齐div。我尝试了以下方法：

我认为它适用于：

{{1}}

但正如你可以在小提琴中看到它不起作用。我该怎么办？

Answer 1

您还需要提供width。你也应该在父母身上使用position: relative（默认为static）。请参阅更新的小提琴：http://jsfiddle.net/wuf0m41z/1/

Answer 2

您还可以指定right和left属性，并将其设置为0，而不是仅设置宽度：

HTML：

<div class="container">
    <div class="top-menu"></div>
    <div class="bottom-menu"></div>
</div>

CSS：

.container {
    height: 400px;
    background-color: green;
    position:relative;
}
.top-menu, .bottom-menu {
    height: 50px;
    background-color: yellow;
}
.bottom-menu {
    position: absolute;
    bottom: 0;
    right:0;
    left:0;
}

JSFiddle

Answer 3

只需将position:relative;添加到您的容器中，不要忘记在底部菜单中添加width:100%;。

这是一个例子： http://jsfiddle.net/leojavier/wuf0m41z/10/

Answer 4

试试!!!

 .container {
height: 400px;
position: relative;
background-color: green;}

.top-menu {
height: 50px;
background-color: yellow;}

.bottom-menu {
height: 50px;
background-color: yellow;
position:absolute;
bottom:0;
width:100%;}

Answer 5

您的代码现在正确，只需添加宽度。

.bottom-menu {
    position: absolute;
    bottom: 0;
    height: 50px;
    background-color: yellow;
    width:100%;
}

CSS：底部对齐div

5 个答案: