html - 使用位置 :absolute on child divs sticks them together into one place

Question

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

html 部分如下例所示:

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

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

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

我已将元素(具有 .element 类的 div)“向左” float ，因此它们全部位于一行上。到目前为止一切顺利还没有问题。 .element div 的内容各不相同。现在默认情况下，它们是顶部对齐的，我想使用这个 css 将它们对齐到底部:

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

可以工作并且确实将它们对齐到底部，但不幸的是它也将它们粘在一起，并且它们看起来都像一个 div 一样位于一个地方，一个在另一个上面。

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

我一直在寻找这个问题很长时间，但网上没有任何相关的结果，所以如果它是重复的，我深表歉意。 提前致谢。

Answer 1

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

如果我理解正确的话，你想将 div 垂直对齐到底部并使它们彼此相邻/彼此相邻吗？那么很可能你必须修改你的div的display css属性为display:inline-block;甚至使用 span 标签代替。