Как написать текст слева от картинки в css?
2 ответа
от
abel ,
2 года назад
@kaleigh Написать текст слева от картинки в css можно следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .left { border: 5px solid black; height: 200px; width: 500px; display: flex; } .left img { margin: 3px; } .left p { display: flex; align-items: center; } </style> </head> <body> <div class="left"> <p>Текст слева от картинки</p> <img src="image/56666.jpeg" width="300px" /> </div> </body> </html> |
от
maya ,
6 месяцев назад
@kaleigh
Чтобы написать текст слева от картинки в CSS, вы можете использовать свойство "float". Вот пример:
HTML:
1 2 3 4 |
<div class="wrapper"> <img src="example.jpg" alt="Example Image"> <p>Текст слева от картинки.</p> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 |
.wrapper {
width: 100%;
}
img {
float: left;
margin-right: 10px;
}
p {
margin: 0;
}
|
В данном примере мы использовали свойство "float: left" для установки картинки слева от текста. Мы также добавили небольшое отступление с помощью свойства "margin-right" для создания промежутка между картинкой и текстом. Наконец, мы установили значение "margin: 0" для абзаца, чтобы убрать отступы по умолчанию.
15