html - 创建一个聊天框并且无法在右侧放置聊天消息。此外，添加边框会产生不必要的高度。

Question

我正在尝试制作一个简单的聊天框。直到我添加边框它看起来不错(宽度和高度方面)

但是当我添加 border: solid 1px gray 时，我得到:

这是什么原因造成的？

此外，我还尝试使用 float: right 将用户发送的消息定位在右侧:

但是，如您所见，发送的下一条消息在同一行结束。

提前致谢!

Link to fiddle

Answer 1

更新的 HTML 和 CSS ... 查看更新的 fiddle

<div>
  <div class="message">
    <p>Hello</p>
  </div>
  <div class="clearfix">
    <div class="message me">
      <p>Hello</p>
    </div>
 </div>
  <div class="message">
    <p>Hello</p>
  </div>
  <div class="message">
    <p>Hello</p>
  </div>
  <div class="message">
    <p>Hello</p>
  </div>
  <div class="message">
    <p>Hello</p>
  </div>
</div>

额外的 CSS

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.message p {
   margin: 0; 
}