Обтекание элементов

Здравствуйте! В этой статье я хочу рассказать о таком важном поняти в css как обтекание. Как правило, все блоки и элементы на веб-странице в браузере появляются в том порядке, в каком они определены в коде html. Однако CSS предоставляет специальное свойство float, которое позволяет установить обтекание элементов, благодаря чему мы можем создать более интересные и разнообразные по своему дизайну веб-страницы.

Это свойство может принимать одно из следующих значений:

left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента
right: элемент перемещается вправо
none: отменяет обтекание и возвращает объект в его обычную позицию

При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.

Итак, представим, что нам надо на странице вывести слева от основного текста изображение, справа должен быть сайдбар, а все остальное место должно быть занято основным текстом статьи. Определим интерфейс страницы сначала без свойства float:

Вступите в группу, и вы сможете просматривать изображения в полном размере

		Это интересно 0	Как всё будет выглядеть в блоге: Обтекание элементов Здравствуйте! В этой статье я хочу рассказать о таком важном поняти в css как обтекание Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/kompyuternaya-gramotnost/13972333/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Обтекание элементов </a> <div class="insert-intro" style="font-family:trebuchet MS;">Здравствуйте! В этой статье  я хочу рассказать о таком важном поняти в css как обтекание </div> </div> Обтекание элементов <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/kompyuternaya-gramotnost/13972333/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Обтекание элементов</a> <div style="font-family:trebuchet MS;">Здравствуйте! В этой статье я хочу рассказать о таком важном поняти в css как обтекание </div> </div>

webguru

28.07.2017

В избранное Пожаловаться Просмотров: 348

Комментарии ⁰

Компьютерная грамотность 1406

Важные темы:

Активные участники:

Последние откомментированные темы:

Обтекание элементов

Комментарии временно отключены

Открытая группа
17418 участников