如何在聊天中对齐div？

Question

如何在div中对齐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