html - 如何像在聊天中一样对齐 div？

Question

如何像在聊天中一样对齐 div，传入的消息在左侧，结果在右侧。检查下图

Answer 1

这是一个flexbox 解决方案，可以帮助您入门。 speaker1 从行的开头开始，speaker2 固定到行的末尾。每行是父容器宽度的 75%。您可以根据需要调整该宽度。

.chat {
  display: flex;
  flex-direction: column;
}

.chat>* {
  width: 75%;
  margin-bottom: 1em;
  border: 1px solid gray;
  padding: 1em;
}

.speaker1 {
  align-self: flex-start;
}

.speaker2 {
  align-self: flex-end;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

<ul class="chat">
  <li class="speaker1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit pariatur voluptatibus unde illo animi soluta odit minus fugiat. Veniam numquam quam illum praesentium quibusdam impedit, voluptate ratione nesciunt dolores dolorem!</li>
  <li class="speaker2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="speaker2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint excepturi praesentium illum, hic alias, totam porro ipsum esse magni eaque! Labore ullam dolorem quia. Porro autem, corrupti aliquid eligendi repellendus.</li>
  <li class="speaker1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ipsum neque molestias eius, obcaecati ab optio nesciunt quibusdam amet est accusantium, sit, libero dolores. Tenetur quibusdam cumque, vitae nisi veniam!</li>
</ul>

jsFiddle