css - 底部对齐窗口底部的 div

Question

我正在尝试对齐窗口底部的一堆固定位置的聊天框。试过vertical-align: bottom但没有用。

<div id="container">
    <div class="message">Message 4</div>
    <div class="message">Message 3</div>
    <div class="message">
        Message 2 <br />
        <div>Message 2</div>
        Message 2
    </div>
</div>

#container{
    bottom: 0;
    right: 0;
    position: fixed;
}
.message {
    border: 1px solid;
    margin-top: 5px;
    float: left;
    margin-right: 5px;    
    background: #ccc
}

小提琴

谢谢！

Answer 1

尝试这个：

.message {
    display: inline-block;
    vertical-align: bottom;
    /*float: left remove this*/
}

Answer 2

将您的#container 位置更改为绝对位置。

此外，请确保您的容器不在具有指定位置的另一个容器或元素内，否则定位将相对于该容器，而不是浏览器窗口。