Question

我正在测试聊天UI，并且已经在代码笔中获得了代码：https://codepen.io/nikitricky/pen/yLOdmdw 但是聊天消息重叠。我尝试使用total_screening_mensual <- structure(list(Sede = c("Las Heras", "Las Heras", "Las Heras", "Las Heras", "Las Heras", "Las Heras", "Las Heras", "Las Heras", "Las Heras", "Las Heras", "Las Heras", "Las Heras", "Saavedra", "Saavedra", "Saavedra", "Saavedra", "Saavedra", "Saavedra", "Saavedra", "Saavedra", "Saavedra", "Saavedra", "Saavedra", "Saavedra"), Mes = structure(c(1546300800, 1548979200, 1551398400, 1554073200, 1556665200, 1559343600, 1561935600, 1564614000, 1567292400, 1569884400, 1572566400, 1575158400, 1546300800, 1548979200, 1551398400, 1554073200, 1556665200, 1559343600, 1561935600, 1564614000, 1567292400, 1569884400, 1572566400, 1575158400), class = c("POSIXct", "POSIXt" ), tzone = ""), n = c(54L, 53L, 60L, 56L, 77L, 98L, 103L, 88L, 72L, 75L, 87L, 52L, 50L, 50L, 62L, 89L, 74L, 86L, 103L, 94L, 78L, 91L, 70L, 68L)), row.names = c(NA, -24L ), class = "data.frame")和换行符，但没有一个起作用。我该如何解决？

Answer 1

尼克M是正确的。还要看看我的CSS编辑。我给每个聊天气泡一个.chat类，并创建了一个声明块来容纳所有通用样式规则。

.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>

Answer 2

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

使聊天消息不与CSS重叠

2 个答案: