使聊天消息不重叠 CSS

Question

我正在测试聊天 UI，我已经在 codepen 中获得了代码：https://codepen.io/nikitricky/pen/yLOdmdw 但是聊天消息重叠。我尝试使用 margin 和换行符，但其中 none 行得通。我该如何解决这个问题？

Answer 1

添加“清除：两者；”到 .chat-else

Answer 2

Nick M 是正确的。另请查看我的 CSS 编辑。我给每个聊天气泡一个 .chat class，并创建了一个声明块来容纳所有常见的样式规则。

.chat {
  padding: 10px;
  margin: 10px 0;
  font-size: 18px;
  width: 50%;
  border-radius: 5px;
  clear: both;
}

.chat-else {
  background-color: #f1f1f1;
}

.chat-you {
  background-color: #acfafa;
  text-align: right;
  float: right;
}

.sender {
  background: -webkit-linear-gradient(#005086, #318fb5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 16px;
}

<h2>Chat Messages</h2>

<div class="chat chat-else">
  <span class="sender">Josh</span>
  <p>Hello. How are you today?</p>
</div>

<div class="chat chat-you">
  <p>Hey! I'm fine. Thanks for asking!</p>
</div>

<div class="chat chat-else">
  <span class="sender">Josh</span>
  <p>Sweet! So, what do you wanna do today?</p>
</div>

<div class="chat chat-you">
  <p>Nah, I dunno. Play soccer.. or learn more coding perhaps? Nah, I dunno. Play soccer.. or learn more coding perhaps? Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
</div>

使聊天消息不重叠 CSS

Make chat messages not overlap CSS

html

css

overlap