Текст выходит за границы дива

Question

Хочу сделать так что бы вот этот красный контейнер оставался таким же как и второй, и третий, и он не растягивался в ширину, а вниз и был такой же шириной как картинка и дальше картинки не выходил.

Вот так хочу сделать, но текст вечно идет по ширине, а если даже один текст сделаю нормальный, то второй не получается

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .left,
.wrapper .center,
.wrapper .right {
  border: 1px solid red;
}

<div class="wrapper">
  <div class="left">
    <img src="img/мобы.jpg" alt="Left image">
    <h3>Модифика́ция (англ. Modification, сокращённо мод (англ. Mod)) — это дополнение от сторонних разработчиков, которое изменяет или дополняет оригинальный контент Minecraft.
    </h3>
  </div>
  <div class="center">
    <img src="img/модпаки.jpg" alt="Center image">
  </div>
  <div class="right">
    <img src="img/ферма.jpg" alt="Right image">
  </div>
</div>

Answer 1

Ваши блоки .left, .center и .right однотипные, их не стоит называть по-разному.
Для удобства назову их .item.

Так же, в вашем случае, эти .item, будут произвольного размера, в зависимости от контента и если в одном больше, то он будет сужать соседнее, чтобы занять больше места.

Далее проблема в изображении, вы его никак не стилизуете, а оно, между прочим, никак не растягивается по ширине.

Ну и если отталкиваться от референса, то будет как-то так

.modpack {
  margin-left: 20px;
}

.modpacks {
  width: 170px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.wrapper .item {
  width: 100%;
  border: 1px solid red;
}

.wrapper .item img {
  display: block;
  width: 100%;
}

.wrapper .item h3 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="item">
    <img src="https://i.imgur.com/LXRPGIl.png" alt="Left image">
    <h3>Модифика́ция (англ. Modification, сокращённо мод (англ. Mod)) — это дополнение от сторонних разработчиков, которое изменяет или дополняет оригинальный контент Minecraft.</h3>
  </div>
  <div class="item">
    <img src="https://i.imgur.com/LXRPGIl.png" alt="Center image">
    <h3>Модифика́ция (англ. Modification, сокращённо мод (англ. Mod)) — это дополнение от сторонних разработчиков, которое изменяет или дополняет оригинальный контент Minecraft.</h3>
  </div>
  <div class="item">
    <img src="https://i.imgur.com/LXRPGIl.png" alt="Right image">
    <h3>Модифика́ция (англ. Modification, сокращённо мод (англ. Mod)) — это дополнение от сторонних разработчиков, которое изменяет или дополняет оригинальный контент Minecraft.</h3>
  </div>
</div>

БЛОГ НА HUSL

Текст выходит за границы дива

Ответы (1 шт):