css - 我有 div 掉落的聊天消息

Question

我有聊天消息 div，它 floats left 和 right 但当回复超过一行时，div 会掉下来。

请检查我的codepen div falling down

我想要这个输出:

Answer 1

不要让您的气泡 float ，而是使用左边距。

http://codepen.io/anon/pen/grddmW

编辑:我更新了代码。当然，正确的 float 气泡也是如此。

.message .bubble {
    background: #f0f4f7;
    font-size: 16px;
    padding: 12px 13px;
    border-radius: 5px 5px 5px 0px;
    color: #717070;
    position: relative;
    margin-left: 160px;
}

#chat-messages div.message.right .bubble {
    border-radius: 5px 5px 0px 5px;
    margin-right: 160px;
    max-width: 79%;
    text-align: right;
}

在这两种情况下，都没有 float ，而是向左/向右留出空白。