make css3 divs float to top

Question

Я пытаюсь создать приложение чата, где каждое новое сообщение создает новый 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 ДИВ коробка будет вставлен в том же месте, что и предыдущие сообщения, тем самым скрывая их. Я хочу передать сообщение 1 в начало страницы, не полагаясь на javascript для обновления свойств стиля.

Answer 1

Есть решение для Вашего вопроса:

<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; 
} 

Answer 2

Всемогущий FLEX приходит на помощь!

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

See fiddle

Некоторые концептуализация

CSS3 Flexible Box или Flexbox, является режим компоновки, предусматривающий расположение элементов на странице, так что элементы ведут себя предсказуемо, когда в макете страницы должны быть размещены различные размеры экрана и различные дисплеи размером . Для многих приложений модель гибкого ящика обеспечивает улучшение по сравнению с моделью блока в , что оно не использует поплавки, а также поля полей гибкого контейнера не совпадают с полями его содержимого.

Многие дизайнеры найдут модель flexbox более легкой в ​​использовании. Ребенок Элементы в гибкой коробке могут быть выложены в любом направлении и могут иметь гибкие размеры для адаптации к пространству дисплея. Таким образом, позиционирование ребенка элементов намного проще, а сложные макеты могут быть достигнуты более и с кодом более чистого кода, так как порядок отображения элементов не зависит от их порядка в исходном коде. Эта независимость преднамеренно влияет только на визуальный рендеринг, оставляя речевой порядок и навигацию на основе исходного кода.

от Mozilla MDN "Using CSS flexible boxes"