Как сделать картинку слева от текста css

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

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

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

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

Начать с HTML

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

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

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

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

Стили CSS

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

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

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

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

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

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

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

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

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

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

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

Выравнивание картинок

В зависимости от положения изображения различают разные способы их выравнивания. Так, рисунок может выравниваться по правому или левому краю окна браузера или, если он встраивается непосредственно в текстовую строку, по базовой линии текста.

Обтекание изображения текстом

Выравнивание изображения с одновременным обтеканием его текстом — один из популярных приёмов вёрстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с разных сторон. Для создания обтекания изображения текстом существует несколько способов, самый удобный, конечно же, связан с применением стилей.

Для обтекания картинки текстом применяется стилевое свойство float . Значение right будет выравнивать изображение по правому краю родительского элемента или окна браузера, а текст размещать слева от рисунка. Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 1). Элемент, для которого установлено значение float , обычно называется плавающим. Это название, конечно же, условное и говорит лишь о том, что текст или другие объекты будут обходить его с разных сторон, создавая обтекание.

Пример 1. Применение float

В данном примере вводится два класса с именами left и right , добавление которых к элементу <img> или <figure> выравнивает их по соответствующему краю. Чтобы текст немного отступал от картинки добавляется универсальное свойство margin . На рис. 1 показано выравнивание по левому краю.

Выравнивание фотографии по левому краю

Рис. 1. Выравнивание фотографии по левому краю

Выравнивание рисунка относительно текста

Картинки можно добавлять непосредственно в текст и управлять их положением относительно текста с помощью свойства vertical-align . По умолчанию картинка выравнивается по базовой линии — это невидимая горизонтальная линия, проходящая по нижнему краю символов. Некоторые буквы (д, р, у, ф, ц, щ) содержат нижний выносной элемент, выходящий за базовую линию (рис. 2).

Базовая линия

Рис. 2. Базовая линия

Если просто вставить рисунок посередине строки, то он будет выглядеть следующим образом (рис. 3).

Картинка, выровненная по базовой линии текста

Рис. 3. Картинка, выровненная по базовой линии текста

В примере 2 все изображения внутри абзаца <p> выравниваются посередине текста, для этого в качестве значения применяется middle .

Пример 2. Выравнивание картинки относительно текста

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изображения</title> <style> p img < vertical-align: middle; ></style> </head> <body> <p>Вид самой кривой изменяется с помощью инструмента карандаш <img src="image/pen.png" alt="">. Для создания прямых отрезков устанавливайте точки удерживая клавишу Shift. </p> </body> </html>

Результат данного примера показан на рис. 4. Заметьте, как изменилось положение верхней строки с картинкой.

Обтекание картинки текстом CSS /HTML

Обтекание картинки текстом CSS помогает удобно разместить материал на страницах сайта. Для этого используется свойство float и margin. Значение left выравнивает изображение по левому краю, right — по правому и соотвественно текст красиво обтекает вокруг свободных сторон картинки.

Пример

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan. Suspendisse potenti. Donec imperdiet consequat orci, id imperdiet elit faucibus quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan. Suspendisse potenti. Donec imperdiet consequat orci, id imperdiet elit faucibus quis.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *