Левое и правое изображения, реагирующие на размер страницы и центрированные

Я немного отвык от практики и расстроен, потому что я делал это 100 раз в прошлом, но теперь я не уверен, что я делаю неправильно.

Я хочу избавиться от разрыва между изображением и текстом, я также хочу, чтобы он был центрирован (изображение на дальней стороне контейнера с текстом, отображаемым рядом с ним и занимающим все оставшееся пространство, оставшееся в контейнере ).

Обновлено: в основном я хочу, чтобы это выглядело так и работало с любым размером страницы: https://imgur.com/SHHI61o В мобильной версии это будет выглядеть примерно так: https://imgur.com/H1wXeIK

Я пытаюсь выровнять изображения по бокам, а текст рядом с изображением.

Я не могу понять, что я делаю неправильно, и был бы очень признателен за помощь.

Вот мой код:

https://codepen.io/Squeezitgirdle/pen/OJwLxwN

.conversation {
  max-width: 75%;
  margin: auto;
}
.right-msg 
{
position: relative;
max-width:50%;
min-height: 30px;
color:#ffffff;
padding:9px 9px 9px 15px;
margin-bottom:20px;
background: black;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 15px;
}

.right-msg:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent rgba(0,0,0,1);
display: block;
width: 0;
z-index: 1;
right: -8px;
top: 6px;
}
.left-msg 
{
position: relative;
max-width:50%;
min-height: 30px;
color:#ffffff;
padding:9px 9px 9px 15px;
margin-bottom:20px;
background: rgba(66,66,66,1);
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 15px;
}

.left-msg:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px 12px 6px 0;
border-color: transparent rgba(66,66,66,1);
display: block;
width: 0;
z-index: 1;
left: -8px;
top: 6px;
}

.right-msg {
float:left;
text-align: right;
}

.left-msg {
float:right;
}
.left-img {
margin-right:  auto;
margin-bottom:10px;  
  max-width:20%;
}
.right-img {
  margin-left: auto;
    padding-bottom:-10px;
    margin-bottom:10px;
  max-width: 20%;
}

<div class = "conversation">
<div class='row'>
                <div class='right-msg'>Msg words words words words words words words words words words words words words words words words words words words words words words words words</div>
                <div><img class='right-img'  src = "https://i.imgur.com/pXN7qwv.png"></div></div>

<div class='row'>
    <div class='left-msg'><span class='mirror'>hey words words words words words words words words words words words words words words words words words words words words words words words words</span></div>
                <div ><img class='left-img' src = "https://i.imgur.com/pXN7qwv.png"></div></div>
<div class='row'>
                <div class='right-msg'>Msg 3</div>
                <div><img class='right-img' src = "https://i.imgur.com/pXN7qwv.png"></div>
</div>
<div class='row'>
    <div class='left-msg'><span class='mirror'>Msg Close</span> </div>
                <div><img class='left-img' src = "https://i.imgur.com/pXN7qwv.png"></div>
</div>
<div class='row'>
                <div class='right-msg'>Msg 4</div>
                <div><img class='right-img' src = "https://i.imgur.com/pXN7qwv.png"></div>
</div>

У вас есть референсная картинка того, что должно получиться?

— 17.12.2022 12:18

Что-то вроде этого: imgur.com/SHHI61o Когда я уменьшаю страницу, она выглядит неплохо, за исключением двух обведенных точек: imgur.com/KypF8LG одно из сообщений оказывается скрытым в другом контейнере div, и между текстом огромный разрыв. О, и последнее изображение + текст должны быть справа. Короче говоря, изображения должны располагаться сбоку экрана, а текст должен занимать оставшееся пространство контейнера.

— 17.12.2022 20:46

Надеюсь, это более понятно. В основном я хочу, чтобы левое изображение + речевой пузырь были горизонтальными и выровнены по левой стороне экрана. Правое изображение + всплывающая подсказка выровнены по правой стороне экрана. Без разрыва между речевым пузырем и изображением. Я использую max-width: %, чтобы оптимизировать его для любого размера браузера, что может вызывать некоторые проблемы. Это и мои свойства float, вероятно, неверны.

— 18.12.2022 01:05

html css

17.12.2022 08:07

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я изменил некоторые части в вашем коде:

*, *::after, *::before {
    box-sizing: border-box;  
}
* {
    margin: 0;
    padding: 0;
}



.conversation {
    max-width: 75%;
    margin: auto;
}

.row {
    width: 100%;
    display: flex;
}
.row-r {
    justify-content: flex-end;
    text-align: right;
    padding-left: calc(12em + 8px + 4em);
}
.row-l {
    justify-content: flex-start;
    padding-right: calc(12em + 8px + 4em);
}
.row-l > div:last-of-type {
    order: -1;
}

.right-msg {
    position: relative;
    min-height: 30px;
    height: fit-content;
    margin: 0 8px 20px 0;
    padding: 9px 9px 9px 12px;
    color:#fff;
    background: #000;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 15px;
}
.right-msg:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 6px 0 6px 12px;
    border-color: transparent rgba(0,0,0,1);
    display: block;
    width: 0;
    z-index: 1;
    right: -8px;
    top: 6px;
}

.left-msg {
    position: relative;
    min-height: 30px;
    height: fit-content;
    margin: 0 0 20px 8px;
    padding: 9px 9px 9px 12px;
    color:#fff;
    background: rgba(66,66,66,1);
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 15px;
}
.left-msg:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 6px 12px 6px 0;
    border-color: transparent rgba(66,66,66,1);
    display: block;
    width: 0;
    z-index: 1;
    left: -8px;
    top: 6px;
}

img {
    width: 12em;
}

<div class = "conversation">

    <div class='row row-r'>
        <div class='right-msg'>Msg words words words words words words words words words words words words words words words words words words words words words words words words</div>
        <div><img src = "https://i.imgur.com/pXN7qwv.png"></div>
    </div>
    
    <div class='row row-l'>
        <div class='left-msg'>
          hey words words words words words words words words words words words words words words words words words words words words words words words words</div>
        <div ><img src = "https://i.imgur.com/pXN7qwv.png"></div>
    </div>

    <div class='row row-r'>
        <div class='right-msg'>Msg 3</div>
        <div><img src = "https://i.imgur.com/pXN7qwv.png"></div>
    </div>

    <div class='row row-l'>
        <div class='left-msg'>Msg Close</div>
        <div><img src = "https://i.imgur.com/pXN7qwv.png"></div>
    </div>

    <div class='row row-r'>
        <div class='right-msg'>Msg 4</div>
        <div><img src = "https://i.imgur.com/pXN7qwv.png"></div>
    </div>
    
  </div>

Это тоже сработало, спасибо! Когда я завтра вернусь за компьютер, я собираюсь просмотреть ваш код и код других ребят, чтобы увидеть, где я ошибся. Еще раз спасибо!

— 19.12.2022 09:54

18.12.2022 12:43

Ответ принят как подходящий

вы можете использовать этот код

.conversation {
  max-width: 75%;
  margin: auto;
}
.right-msg 
{
position: relative;
max-width:50%;
color:#ffffff;
padding:9px 9px 9px 15px;
margin-bottom:20px;
background: black;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 15px;
}

.right-msg:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent rgba(0,0,0,1);
display: block;
width: 0;
z-index: 1;
right: -8px;
top: 6px;
}
.left-msg 
{
position: relative;
max-width:50%;
min-height: 30px;
color:#ffffff;
padding:9px 9px 9px 15px;
margin-bottom:20px;
background: rgba(66,66,66,1);
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 15px;
}

.left-msg:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px 12px 6px 0;
border-color: transparent rgba(66,66,66,1);
display: block;
width: 0;
z-index: 1;
left: -8px;
top: 6px;
}


.row{
  display: flex;
  gap: 15px;
  align-items: start;
}

.row.left{
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.row.right{
  justify-content: end;
    margin-left: auto;
  margin-right: 0;
}
.row.left .right-msg::after{
  right: usnet;
  left: -7px;
  transform: rotateY(180deg);
}
.row.right{
  text-align: right;
}
.row.left .right-msg {
  margin-left: 0;
  margin-right: auto;
}
.row img, .row img-box{
  width: 100px !important;
}

<div class = "conversation">
    <div class='row right'>
                <div class='right-msg'>
          Msg words words words words words words words words words words words words words words words words words words words words words words words words
      </div>
                <div class = "img-box">
          <img class='right-img'  src = "https://i.imgur.com/pXN7qwv.png">
                </div> 
            </div>
  
  <div class='row left'>
                <div class='right-msg'>
          Msg words words words words words words words words words words words words words words words words words words words words words words words words
      </div>
                <div class = "img-box">
          <img class='right-img'  src = "https://i.imgur.com/pXN7qwv.png">
                </div> 
            </div>
  
  <div class='row left'>
                <div class='right-msg'>
          Msg words word
      </div>
                <div class = "img-box">
          <img class='right-img'  src = "https://i.imgur.com/pXN7qwv.png">
                </div> 
            </div>
  
  <div class='row right'>
                <div class='right-msg'>
          Msg words
      </div>
                <div>
          <img class='right-img'  src = "https://i.imgur.com/pXN7qwv.png">
                </div> 
            </div>
</div>

Это идеально, спасибо! Мне пришлось исправить часть HTML (классы left-msg и left-img), на всякий случай, если кто-нибудь увидит это в будущем. Но это сразу решило мою проблему, спасибо!

— 19.12.2022 10:10

18.12.2022 13:29