如何在聊天中对齐div?

问题描述 投票:-1回答:1

如何对齐聊天中的div,左侧的传入消息,右侧的消息。检查下面的图片

enter image description here

html css css3
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.