html - 如何在 CSS 中设置聊天框的样式？

Question

我有一个如下所示的聊天框:

我的主要问题是所有消息都是固定宽度，而我希望宽度根据文本量自动调整大小。这些元素都是聊天 div 中的跨度，显示 block (内联或内联 block 将并排呈现)并更改边距以使消息“粘”在一侧。这是我的 CSS

.psentMessage {
    text-align: right !important;
    background-color: #F0F0F0;
    margin-right: 0 !important;
    border-top-right-radius: 0 !important;
}
.pmessage {
    text-align: left !important;
    background-color: white;
    margin-left: 0 !important;
    border-top-left-radius: 0 !important;
}
.pmessage, .psentMessage {
    display: block !important;
    padding: 2vh 1vw;
    max-width: 85%;
    margin-top: 1vh;
    margin-bottom: 1vh;
    border-style: hidden;
    border-radius: 10px;
}

如何使 div 自动调整大小但仍将其保留在此布局中？

Answer 1

这可以通过使用 flex-direction: column; 的 flexbox 布局来解决。

当您添加align-items: flex-start; 时，每条消息的宽度会根据内容进行调整。将 align-self: flex-end; 添加到您想要右对齐的消息中。

简化示例:https://codepen.io/anon/pen/bMobqM

HTML:

<div>
    <p class="other">Hello</p>
    <p class="other">This is the project managment app</p>
    <p>gwkki</p>
    <p class="other">hello</p>
    <p class="other">hi</p>
    <p>Hello</p>
    <p class="other">online</p>
</div>

CSS:

div {
  background: #ccc;
  padding: 20px;
  width: 150px;
  display: flex;
  flex-direction:column;
  align-items: flex-start;
}
    
p {
  background: #fff;
  padding: 10px;
}
    
.other {
  align-self: flex-end;
  background: #ddd;
}

关于 flexbox 的更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/