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

See fiddle

一些概念化

CSS3 Flexible Box或flexbox是一种布局模式   在页面上排列元素以使元素表现出来   可预见的是，页面布局必须适应不同的屏幕   尺寸和不同的显示设备。对于许多应用程序，   灵活的盒子模型提供了对块模型的改进   它不使用浮动，也不使用弹性容器的边距   崩溃与其内容的边缘。

许多设计师会发现Flexbox模型更易于使用。儿童   flexbox中的元素可以在任何方向布局并且可以具有   灵活的尺寸，以适应展示空间。定位孩子   因此，元素更容易，并且可以实现更复杂的布局   简单而干净的代码，因为元素的显示顺序是   独立于源代码中的顺序。这种独立性   故意只影响视觉渲染，留下语音顺序   和基于源订单的导航。

来自Mozilla MDN＆＃34; Using CSS flexible boxes"

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

使css3 divs浮动到顶部

2 个答案: