2

我有许多具有相同类的 div，我想在它们的容器 div 内垂直对齐。

html 部分看起来像这个例子：

<div id="container">
    <div class="element">
        ........
    </div>

    <div class="element">
        ........
    </div>

    <div class="element">
        ........
    </div>
</div>

我已经将元素（带有 .element 类的 div）“向左”浮动，因此它们都在一行上。到目前为止一切顺利，还没有问题。.element div 的内容各不相同。现在默认情况下，它们顶部对齐，我想使用这个 css 将它们对齐到底部：

#container {position:relative;}
#container .element {position:absolute;bottom:0;}

有效并且确实将它们与底部对齐，但不幸的是它也将它们粘在一起，它们看起来都像一个 div 一样在一个地方，一个在另一个之上。

尝试为 .element div 设置宽度、边距、填充等无济于事，它们只是充当一个 div。我需要做什么才能将它们分开？我相信给每个 div 一个单独的类不是正确的解决方案。我也不想使用表格解决方案，除非绝对没有其他办法。我试过 vertical-align:bottom 出于某种原因什么也没做。

我一直在寻找这方面的内容，但网上没有任何相关内容，所以如果它是重复的，我深表歉意。提前致谢。

4

2 回答 2

2

这就是 position:absolute 的意义所在。我不明白你为什么使用它。

如果我理解正确，您希望将 div 垂直对齐到底部并让它们彼此相邻/并排显示？然后很可能您必须将 div 的显示 css 属性修改为 display:inline-block; 甚至使用 span 标签。

于 2012-07-14T10:23:59.123 回答
0

您可以将 div 与另一个 div 包装#container，将其位置设置为相对，并将 #container 的位置设置为绝对值，并在底部bottom: 0 查看我的示例

于 2012-07-14T10:23:48.587 回答