时间戳

首页 > 解决方案 > 创建一个聊天框，不能在右侧放置聊天消息。此外，添加边框会产生不必要的高度。

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

问题描述

我正在尝试制作一个简单的聊天框。直到我添加边框它看起来不错（宽度和高度明智）

聊天消息示例

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

聊天消息示例 2

这是什么原因造成的？

此外，我正在尝试将用户发送的消息放置在右侧float: right：

完整的聊天框截图

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

提前致谢！

链接到小提琴

标签： htmlcsschat

解决方案

更新了 HTML 和 CSS ... 查看更新的小提琴

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

推荐阅读