Если вам интересно узнать, как разместить изображение справа от текста, это довольно простая задача. Есть много ситуаций, когда программисты хотят, чтобы изображение на веб-странице отображалось внутри текста, а текст обтекал или обтекал его. Манипулирование изображениями похоже на манипулирование текстом, поэтому, если у вас есть опыт работы с последним, этот процесс не должен быть сложным.
Фактически, с помощью свойства CSS float легко разместить ваше изображение справа от текста и заставить текст обтекать его на левая сторона. Воспользуйтесь этим пятиминутным руководством, чтобы узнать, как это сделать.
Настройка макета с помощью Float
Этот базовый макет создаст пространство для вашего текста и разместит изображение справа от этого текста. Конечно, эти макеты могут быть более сложными, но этот пример покажет вам основной принцип работы с плавающей точкой и текстом.
Предполагая, что у вас уже есть HTML-документ, с которым вы работаете, и отдельная таблица стилей CSS, начните с создания нового div, который будет действовать как строка, содержащая ваш плавающий элемент.
Дайте этому новому div два класса: container и clearfix. Есть много способов справиться с этим, и имена полностью зависят от вас, но они помогут вам оставаться организованным и создать свой макет.
-
В вашем CSS определите, как вы хотите, чтобы ваш контейнер вписывался в ваш общий макет. В этом примере мы просто сделаем строку полной шириной.
.container {
ширина: 100%;
высота: 25бэр;
} -
Далее займемся классом clearfix. Clearfix необходим, потому что float может создавать странные сбои в вашем макете. Определение свойства «переполнение» в clearfix предотвращает выход плавающих элементов за пределы назначенного им пространства.
.clearfix {
перелив: авто;
} -
Теперь вы можете создать элемент в своем контейнере div и переместить его вправо. Если вы оборачиваете текст вокруг изображения, это будет ваше изображение. Создайте элемент и присвойте ему класс для свойства float.
-
Создайте класс для своего поплавка. Вы, вероятно, захотите добавить туда немного стиля, если будете делать больше идентичных элементов. В противном случае вы можете применить отдельный класс для своего стиля.
.float-right {
float: right;
ширина: 300 пикселей;
высота: 200 пикселей;
цвет фона: красный;
запас: 0 0 0,5 бэр 0,5 бэр
} -
Если вы хотите обернуть этот плавающий элемент текстом, вставьте текст сейчас. Поместите его в любом месте контейнера, до или после плавающего элемента.
Какой-то текст
Больше текста
...и так далее.
-
Обновите страницу и посмотрите результат.
Заключение
Вот и все. Теперь вы видите, что переместить изображение вправо совсем несложно. Вам также может быть интересно переместить изображение влево и переместить его в центр. Хотя первый ход возможен, к сожалению, вы не можете переместить изображение в центр, поскольку для этого обычно требуется макет из двух столбцов.