• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Разместить изображение слева от текста на CSS (Как разместить изображение слева от текста на веб-странице)
Разместить изображение слева от текста на CSS
Kosten
Дата: Суббота, 2019-07-20, 01:51 | Сообщение 1
Онлайн
Администраторы
Сообщений:25246
Награды: 57


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

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



Начать с HTML

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

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

Код
<div class="otstupy-izobrazheniye-slevo">
<p><img src="http://zornet.ru/_fr/20/s5550479.jpg" alt="ZorNet.Ru — сайт для вебмастер">Здесь идет описание</p>
</div>

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

CSS

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

Код
.otstupy-izobrazheniye-slevo img {
float: left;
padding: 0 18px 18px 0;
}

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

Демонстрация
Прикрепления: 9454570.jpg(71.7 Kb) · 7684070.zip(3.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Разместить изображение слева от текста на CSS (Как разместить изображение слева от текста на веб-странице)
  • Страница 1 из 1
  • 1
Поиск: