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

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

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

Creating a chatbox and can't position chat messages on the right. Also, adding border creates unnecessary height.

html

css

chat