Блочные элементы на веб-странице появляются в последовательном порядке. Чтобы улучшить внешний вид страницы или ее полезность, вы можете изменить этот порядок, обернув блоки, включая изображения, чтобы текст обтекает изображения.
С точки зрения веб-дизайна этот эффект известен как плавающее изображение. Это достигается с помощью CSS свойствоплавать, который позволяет тексту обтекать изображение с выравниванием по левому краю с правой стороны (или вокруг изображения с выравниванием по правому краю с левой стороны).
Начать с HTML
В этом примере добавляется изображение в начале абзаца (перед текстом, но после открывающего
тег). Вот начальная разметка HTML:
Текст абзаца идет сюда. В этом примере у нас есть изображение снимка в голову, поэтому этот текст может описывать человека на снимке в голову.
По умолчанию страница будет отображаться с изображением над текстом, поскольку изображения в HTML являются блочными элементами. Это означает, что браузер по умолчанию отображает разрывы строк до и после элемента изображения. Чтобы изменить этот вид по умолчанию с помощью CSS, добавьте значение класса (
оставил) к элементу изображения, чтобы служить крючком, к которому можно прикрепить свойства.Текст абзаца идет сюда. В этом примере у нас есть изображение снимка в голову, поэтому этот текст может описывать человека на снимке в голову.
Обратите внимание, что этот класс ничего не делает сам по себе. CSS добьемся желаемого стиля.
Добавление стилей CSS
Добавьте это правило в таблица стилей:
.оставил {
плыть налево;
отступ: 0 20 пикселей 20 пикселей 0;
}
Этот стиль совпадает с чем угодно с классом оставил слева от страницы и добавляет немного набивка справа и снизу изображения, чтобы текст не соприкасался с ним.
В браузере изображение теперь будет выровнено по левому краю; текст появится справа с пробелом между ними.
Ценность класса .оставил здесь используется произвольно. Вы можете называть его как угодно, потому что сам по себе он ничего не делает. Однако вам также не следует, чтобы любое значение, которое вы изменяете в CSS, также отражалось в HTML.
Другие способы достижения этих стилей
Вы также можете убрать значение класса с изображения и стилизовать его с помощью CSS, написав более конкретный селектор. В приведенном ниже примере изображение находится внутри раздела с основное содержание значение класса.
Текст абзаца идет сюда. В этом примере у нас есть изображение снимка в голову, поэтому этот текст может описывать человека на снимке в голову.
Чтобы стилизовать это изображение, напишите этот CSS:
.main-content img {
плыть налево;
отступ: 0 20 пикселей 20 пикселей 0;
}
В этом сценарии изображение выравнивается по левому краю, а текст плавает вокруг него, как и раньше, но без дополнительного значения класса в разметке. Выполнение этого в масштабе может помочь создать меньший HTML-файл, которым будет проще управлять и который может повысить производительность.
Избегайте встроенных стилей
Наконец, вы можете использовать встроенные стили:
Текст абзаца идет сюда. В этом примере у нас есть изображение снимка в голову, поэтому этот текст может описывать человека на снимке в голову.
Однако это не рекомендуется, поскольку в этом случае сочетается стиль элемента с его структурной разметкой. Лучшие практики диктуют, что стиль и структура страницы остаются отдельными. Это разделение особенно полезно, когда вам нужно изменить макет страницы и искать разные размеры экрана и устройства с адаптивным веб-сайтом.
Переплетение стиля страницы с HTML делает создание медиа-запросов настроить свой сайт под разные экраны намного сложнее.