| Kosten | Суббота, 20 Июля 2019, 01:51 | Сообщение 1 |
| Давайте разберем, как поставить изображение по левую сторону, и так, чтоб было обтекание текста. А точнее, это как разместить изображение или картинки слева от текста на веб-странице. Где безусловно задействуем каскадные таблицы стилей, которое нужно для точного размещения изображений.
Блочный элемент в 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», которое мы использовали, является произвольным.
Демонстрация
| | Страна: (RU) |
| |
