使css3 div浮動到頂部

Question

我正在嘗試創建一個聊天應用程序，其中每個新消息都會創建一個新的div，該div會插入到容器的底部，從而將前面的消息推向容器的頂部。 我可以將消息添加到容器中，但是無法正常工作。

HTML（示例）：

 <div id='chat_container'>
   <div class='message'>Message 1</div>
   <div class='message'>Message 2</div>
 </div>

CSS：

 #chat_container{
                    position: relative;
                    height: 240px;
                }


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

如果使用上述樣式，則每個后續的.message div框都將與先前的消息插入相同的位置，從而將其隱藏。 我想將消息1推向頁面頂部，而不必依賴javascript更新樣式屬性。

Answer 1

全能的FLEX來救援！

#chat_container {
    display:flex;
    flex-direction:column-reverse
}
.message {
    display:block;
    width:100%;
    margin:20px auto;
    border:1px solid #000;
}

見小提琴

一些概念化

CSS3靈活框（即flexbox）是一種布局模式，用於在頁面上排列元素，以便當頁面布局必須容納不同的屏幕尺寸和不同的顯示設備時，元素的行為可預測。 對於許多應用程序，柔性盒模型提供了一種對塊模型的改進，因為它不使用浮點數，也沒有使用彈性容器的邊距隨其內容的邊沿收縮。

許多設計師會發現flexbox模型更易於使用。 flexbox中的子元素可以在任何方向上進行布局，並且可以具有靈活的尺寸以適應顯示空間。 因此，放置子元素更加容易，並且由於元素的顯示順序與它們在源代碼中的順序無關，因此可以使用簡潔的代碼更簡單地實現復雜的布局。 這種獨立性有意地僅影響視覺渲染，而保留語音順序和基於源順序的導航。

來自Mozilla MDN“ 使用CSS柔性盒”

Answer 2

有一個解決您的問題的方法：

<div id='chat_container'>
  <div id='wrapper'>
    <div class='message'>Message 1</div>
    <div class='message'>Message 2</div>
  </div>
</div>

CSS：

#chat_container{
    height: 240px;
    display: table;
}
.wrapper{
    display: table-cell;
    vertical-align: bottom;
}
.message{
    position: relative;
}