Question

我正在设计一个响应式聊天应用程序，现在我想设计消息在屏幕上的显示方式。通过显示消息，我必须在左侧和旁边显示用户的图像div包含消息的详细信息：编写消息的用户的名称及其旁边的时间，以及相同的div但用户名和时间显示消息的内容。

此外，包含消息详细信息的div与用户图像分开，并且具有自己的风格。

我在同一行中设置了消息div旁边的图像，但无论div的大小是多少，它们都不会从同一水平线开始，然后是消息从上到下成长。

聊天板必须是有序列表<ol>，所以这是我的两个列表项的代码（两条消息）：fiddle

这里是我想要的例子： image

我的问题与this one不同，因为建议的答案是建议将图片放在邮件详细信息的div中，这不是我想要的。

如何实现？

任何帮助都表示赞赏。谢谢你的帮助！

Answer 1

这就是我所做的：

我删除了内联css，因为将它用于此类事情不是最佳做法
我将聊天内容包装到一个公共容器中
如果您需要添加右侧对齐的消息，我创建了一个名为.right的条件类

我使用的代码是伪造表的使用。

基本上，我将公共容器设置为display:table，然后图标是表格单元格，而消息是另一个表格单元格。

然后，您可以使用vertical-align: top在顶行对齐它们，或使用其他选项将其移动到容器div的中间或底部。

以下是包含两条消息的完整代码（左侧和右侧）： https://codepen.io/nickimola/pen/EvZKQv?editors=1100

<强> HTML

<ol>
 <li>
  <div class="message-container">
   <div class="user-icon">
    <img src="https://i.fantasyfootball.telegraph.co.uk/football/premierleague/images/elements/stat_1516.png?ver=350" />
   </div>
   <div class="message">
    <span class=username> username</span>
    <span class="time"> 16:00</span>
    <span class="user-message">message content here message content here message content here</span>
   </div>
  </div>
 </li>

 <li class="right">
  <div class="message-container">
   <div class="message">
    <span class=username> username</span>
    <span class="time"> 16:00</span>
    <span class="user-message">message content here message content here message content here</span>
   </div>
   <div class="user-icon">
    <img src="https://i.fantasyfootball.telegraph.co.uk/football/premierleague/images/elements/stat_1516.png?ver=350" />
   </div>
  </div>
 </li>

</ol>

<强> CSS

ol {
  list-style-type: none;
  -webkit-padding-start: 0;
}
ol li {
  display: table;
  width: 100%;
  margin-bottom: 20px;
}
ol li.right {
  text-align: right;
}
ol li .message-container {
  position: relative;
  display: table-row;
  width: 100%;
  height: auto;
}
ol li .message-container .user-icon {
  display: table-cell;
  width: 50px;
  max-width: 50px;
  vertical-align: top;
}
ol li .message-container .user-icon img {
  width: 100%;
  max-width: 40px;
  height: auto;
  border-radius: 50%;
}
ol li .message-container .message {
  position: relative;
  display: table-cell;
  border-radius: 0.5625rem;
  border-style: solid;
  border-width: 0.03125rem;
  border-color: #f4f4f4;
  background: #859756;
  padding: 0px 5px;
}
ol li .message-container .message span.username {
  font-family: Nunito;
  color: #450026;
  font-size: 0.9375rem;
  font-weight: 400;
}
ol li .message-container .message span.user-message {
  margin-top: 10px;
  display: block;
  width: 100%;
}

（在codepen示例中，我使用较少的css来创建css文件，这就是为什么它看起来有点不同）

我希望这会有所帮助。

如何使图像和div从有序列表CSS中的相同水平线开始？

1 个答案: