在不同行上使用右浮动和左浮动

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/

- Marissa

---

可能是重复的问题：如何在使用float:left后换行？ - Robby Cornelissen

Answer 1

将以下内容添加到你的CSS中。

.message-row{
    clear:both;
}

使用FIDDLE进行工作。

- Lakshman Kambam

Answer 2

在第一个message-row div后面添加<br />！

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

- mediaguru

---

感谢Obsidian Age的编辑。我已经加了换行符，但它被删除了。 - mediaguru

如果您有更好的解决方案，请添加，但请不要复制粘贴同一页其他用户的答案。这样很烦人。:( - Lakshman Kambam