在不同的行上向右浮动和向左浮动

Question

我想让一个元素向左浮动，然后一个元素向右浮动，两者都在单独的行上。它应该是一个聊天客户端，文本显示在消息 div 的底部。出于某种原因，发送和接收的消息在同一行结束。

这是html。

<div class="messages">
  <div class="message-list">
    <div class="message-row">
      <span class="sent-message">Hello world</span>
    </div>
    <div class="message-row">
      <span class="received-message">TESTING</span>
    </div>
  </div>
</div>

和 css

.messages {
  height: 500px;
  position: relative;
}

.message-list {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.sent-message{
  float: right;
}

.received-message {
  float: left;
}

和 jsfiddle。 https://jsfiddle.net/5pdad3tx/

Answer 1

将此添加到您的css中。！

.message-row{
    clear:both;
}

工作小提琴