lightanddesign.ru
You might also like
Выравнивание изображений по левому краю страницы по мере продвижения текста по странице является довольно распространенным решением. В Интернете это явление известно как "дрейф изображений". Аналогичный стиль реализован с помощью CSS-свойства float left. Это свойство задает обтекание текста вокруг изображения, выровненного по левому краю.
Начинаем с HTML
В этом примере создается абзац текста, а изображение добавляется первым (перед текстом, но после тега start)
). HTML-разметка выглядит следующим образом
По умолчанию веб-страница отображается с изображением над текстом. Это связано с тем, что изображения в HTML являются блочными элементами. Это означает, что браузер отображает разрыв строки до и после изображения. Это поведение по умолчанию изменяется с помощью CSS. Но сначала давайте добавим значение class к элементу image:.
Стили CSS
Включив в HTML-код атрибут класса ‘left’, вы можете выровнять вертикальное выравнивание по floatleft. Добавьте в таблицу стилей правило, задающее смещение изображения. Кроме того, некоторые дополнительные правила для того, чтобы текст не перекрывался изображением, кадрирование.
Этот код сдвигает изображение влево и добавляет небольшие отступы справа и снизу изображения.
При просмотре страницы в браузере изображение выравнивается по левому краю, а текст абзаца отступает вправо. Обратите внимание на значение используемого класса ‘left’. Обратите внимание, что это значение является необязательным. Вы можете назвать класс как угодно, и термин "левый" сам по себе ничего не дает.
В HTML необходимо определить атрибут class, который связывается с фактическим стилем CSS float left и уже определяет необходимые визуальные изменения.
Альтернативные способы
Установка атрибута class изображения, а затем использование общего стиля CSS для смещения элемента — это только один из способов "выравнивания по левому краю". Создавая более конкретный селектор, значение класса также может быть удалено для создания результата. Рассмотрим пример, когда в разделе со значением класса ‘main-content’ находится изображение.
Для стилизации изображения можно использовать следующий код CSS.
Изображение будет выровнено по левому краю, а текст будет обтекать изображение, как и раньше, но без необходимости добавлять значение class в разметку. Этот метод выравнивания по левому краю создает HTML-файлы меньшего размера и повышает производительность.
Во-вторых, вы также можете добавлять стили непосредственно в HTML-разметку.
Этот метод стиля float-left не рекомендуется, поскольку при его использовании стиль смешивается с разметкой, или структурой.
Лучшей практикой считается разделение стиля и структуры страницы. Это особенно полезно, когда макеты страниц необходимо быстро менять для адаптации к различным размерам экранов и устройств на отзывчивых веб-сайтах. Смешивание стилей страниц и HTML значительно усложняет создание медиа-запросов, которые могут изменять внешний вид сайта по мере необходимости.
Расскажите нам, что вы думаете об этой теме в комментариях. Мы очень ценим ваши комментарии, лайки, подписки, замечания и реакции!
