Question

我有关于垂直对齐元素的CSS问题。

请看一下这个网址： http://leisureonly.com/gravedigger/grow-up [Possibly NSFW]

如果你看右边的侧边栏，底部会出现一个带有“Grave Digger”图像的块。我希望这个块在侧边栏的底部对齐。

我尝试将它包装在div中并将vertical-align：bottom应用于grave-digger元素，但这并不能提供所需的结果。这样做的正确方法是什么？

Answer 1

嗯，首先，sidebar_gravedigger位于side_bar的底部，因此，第一个问题是侧边栏是那么长。如果您希望该元素位于容器的底部（side_bar的父容器），我建议这样做：

.sidebar_gravedigger {
    position: absolute;
    bottom: 20px; /*container padding*/
}

#sidebar {
    padding-bottom: 500px; /*when the content is short, gravedigger won't be over the bar content.*/
}

.container{
    position: relative;
}

Answer 2

这样的事情可能有所帮助：

.sidebar {
  position: relative;
  height: 100%;
}

.module {
  position: absolute;
  bottom: 0;
}

CSS：将元素对齐到底部的问题

2 个答案: