Вопросы Теги

Как выровнять div как в чате?

Если вы используете объекты Date, а затем используете функцию getTime() для обеих дат, это даст вам соответствующее время с 1 января 1970 года в числовом значении. Затем вы можете получить разницу между этими числами.

Если это вам не поможет, ознакомьтесь с полной документацией: http://www.w3schools.com/jsref/jsref_obj_date.asp

-1
задан Yerlan Yeszhanov 20 March 2019 в 03:01
поделиться

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

0
ответ дан Andy Hoffman 20 March 2019 в 03:01
поделиться