Вот 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;
}
- 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!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- 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.
- 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!
Строка формата может быть сделана из двух частей, разделенных точкой с запятой. Первая часть является форматом положительных чисел, вторых из отрицания. Вы захотите это: +0.0%;-0.0%
PS C:\Users\jachymko> '{0:+0.0%;-0.0%}' -f 2.45
+245,0%
PS C:\Users\jachymko> '{0:+0.0%;-0.0%}' -f -2.45
-245,0%