Как сделать так чтобы текст сместился под изображения?
Здравствуйте, делаю сайт для просмотра аниме сериалов и не могу понять как сделать так, чтобы текст сместился под изображения.
CSS:
.anime__bloc { display: flex; top: 110px; position: relative; } .anime__poster { width: 213px; height: 311px; border-radius: 9px; } .anime__name { font-family: 'Bellota', sans-serif; color: $whith; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 208px; } .anime__year { font-family: 'Bellota', sans-serif; font-size: 18px; color: $whith; } |
.anime__bloc { display: flex; top: 110px; position: relative; } .anime__poster { width: 213px; height: 311px; border-radius: 9px; } .anime__name { font-family: 'Bellota', sans-serif; color: $whith; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 208px; } .anime__year { font-family: 'Bellota', sans-serif; font-size: 18px; color: $whith; }
Дополнительно:
а открыть инспектор или devtools и посмотреть на других сайтах как сделано?
position: absolute тебе точно поможет
.anime__bloc { flex-direction: column; } |
.anime__bloc { flex-direction: column; }
+ gap
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать так, чтобы текст сместился под изображения на веб-странице, можно использовать CSS свойство float для изображений. Float позволяет элементу "плыть" вокруг других элементов на странице, в данном случае текст будет обтекать изображения.
Пример кода на HTML и CSS:
<div class="image"> <img src="image.jpg" alt="Image"> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec odio ipsum. Integer sit amet metus eu tortor tempus luctus.</p>
.image { float: left; margin-right: 20px; /* Добавляем отступ справа для изображения */ }
В данном примере мы используем CSS свойство float для изображения, чтобы оно выровнялось слева и текст обтекал его справа. Также мы добавляем небольшой отступ справа для изображения с помощью свойства margin-right.
Если вы хотите, чтобы текст обтекал изображение справа, то можно использовать float: right; в CSS для изображения.
Таким образом, применяя CSS свойство float к изображениям на вашей веб-странице, вы сможете легко управлять их расположением относительно текста и других элементов на странице.