私はdivが落ちているチャットメッセージを持っています

Question

私はチャットメッセージdivを持っていますfloatsleftとrightですが、返信が複数の行になったときにdivが落ちます。

確認してください私の私は、この出力をしたいdiv falling down

codepen：

Answer 1

代わりに左マージンを使用して、あなたのbubbleフロートさせてはいけません。

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

編集：私は、コードを更新しました。もちろん、右浮動気泡の場合も同じです。

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

どちらの場合も、フローティングではなく、左右に余白があります。