底部对齐窗口底部的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
}

Fiddle

谢谢！

Answer 1

试试这个：

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

Answer 2

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

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