Как разместить изображение слева от текста на веб-странице

Используйте каскадные таблицы стилей для точного размещения изображений

Элемент уровня блока в документе HTML (например, на веб-странице) отображается в последовательном порядке. Чтобы изменить порядок, чтобы страница выглядела более привлекательной или чтобы повысить ее полезность, вам нужно будет обернуть блоки, включая изображения, чтобы текст этой страницы обтекал ее.

В терминах сети этот эффект известен как «плавающее» изображение. Этот стиль достигается с помощью свойства CSS для «float». Это свойство позволяет тексту обтекать выровненное по левому краю изображение с правой стороны. Или вокруг выровненного по правому краю изображения с левой стороны.

Начать с HTML

Первое, что вам нужно сделать, это иметь некоторый HTML для работы. Для нашего примера мы напишем абзац текста и добавляем изображение в начале абзаца (перед текстом, но после открывающего тега

). Вот как выглядит HTML-разметка:

 

Текст абзаца приведен здесь. В этом примере у нас есть изображение фотографии выстрела в голову, поэтому этот текст, вероятно, будет о человеке, для которого предназначен выстрел в голову.


По умолчанию наша веб-страница будет отображаться с изображением над текстом, поскольку изображения являются элементами блочного уровня в HTML. Это означает, что браузер по умолчанию отображает разрывы строк до и после элемента изображения. Мы изменим этот внешний вид по умолчанию, перейдя на CSS. Однако сначала мы добавим значение класса к нашему элементу изображения. Этот класс будет действовать как «крючок», который мы будем использовать в нашем CSS позже.

 

Текст абзаца приведен здесь. В этом примере у нас есть изображение фотографии выстрела в голову, поэтому этот текст, скорее всего, относится к человеку, для которого предназначен выстрел в голову.


Обратите внимание, что этот класс «левых» ничего не делает сам по себе. Чтобы мы достигли желаемого стиля, нам нужно использовать CSS дальше.

Стили CSS

С нашим HTML на месте (включая наш атрибут класса «left») мы можем теперь перейти к CSS. Мы добавили бы правило в нашу таблицу стилей, которое бы плавало на этом изображении, а также добавили немного отступов рядом с ним, чтобы текст, который в конечном итоге будет обтекать изображение, не сталкивался с ним слишком близко. Вот CSS, который вы можете написать:

 .left {
float: left;
отступ: 0 20px 20px 0;
}

Этот стиль перемещает это изображение влево и добавляет небольшой отступ (используя некоторые сокращения CSS) справа и снизу изображения.

Если вы просмотрели страницу, которая содержит этот HTML-код в браузере, изображение теперь будет выровнено по левому краю, а текст абзаца появится справа от него с соответствующим интервалом между ними. Обратите внимание, что значение класса «left», которое мы использовали, является произвольным. Мы могли бы назвать это как угодно, потому что термин «левый» ничего не делает сам по себе. Какой бы термин вы ни использовали, он должен иметь атрибут класса в HTML, который работает с реальным стилем CSS, который диктует визуальные изменения, которые вы хотите внести.

Альтернативные способы достижения этих стилей

Такой подход к присвоению элементу изображения атрибута класса и последующему использованию общего стиля CSS, который перемещает элемент, является лишь одним способом, которым вы могли бы добиться такого «выровненного по левому краю изображения». Вы также можете снять значение класса с изображения и стилизовать его с помощью CSS, написав более конкретный селектор. Например, давайте рассмотрим пример, где это изображение находится внутри деления со значением класса «main-content».


Текст абзаца приведен здесь. В этом примере у нас есть изображение фотографии выстрела в голову, поэтому этот текст, скорее всего, относится к человеку, для которого предназначен выстрел в голову.



Чтобы стилизовать это изображение, вы можете написать этот CSS:

 .main-content img {
float: left;
отступы: 0 20px 20px 0;
}

В этом случае наше изображение будет выровнено по левому краю, а текст будет плавать вокруг него, как и раньше, но нам не нужно было добавлять дополнительное значение класса в нашу разметку. Выполнение этого в масштабе может помочь создать файл HTML меньшего размера, которым будет легче управлять, а также может повысить производительность.

Избегайте встроенных стилей

Наконец, вы можете даже добавить стили прямо в вашу HTML-разметку, например так:

 

Текст абзаца приведен здесь. В этом примере у нас есть изображение фотографии выстрела в голову, поэтому этот текст, скорее всего, относится к человеку, для которого предназначен выстрел в голову.


Этот метод называется «встроенными стилями». Это не рекомендуется, так как сочетает в себе стиль элемента и его структурную разметку. Лучшие практики Интернета диктуют, что стиль и структура страницы должны оставаться отдельными. Эта сегрегация особенно полезна, когда вашей странице необходимо изменить свой макет и искать разные размеры экрана и устройства на адаптивном веб-сайте.

Наличие стиля страницы, переплетенного в HTML, значительно затруднит создание медиа-запросов, которые будут корректировать внешний вид вашего сайта по мере необходимости для этих разных экранов.

Оцените статью
Solutics.ru
Добавить комментарий