В этой статье мы расскажем, как сделать обтекание картинки текстом при помощи HTML и CSS.
Очень часто необходимо, чтобы картинка помещалась внутри текста и красиво обтекалась им со всех сторон. Такое способ размещения экономит место на странице и позволяет сделать скучный текст более привлекательным для прочтения.
Мы рассмотрим два способа обтекания текстом изображения.
Способ 1. Обтекание при использовании только HTML.
Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Страница</title>
<link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
<p>Значимость этих проблем настолько очевидна, что постоянный количественный рост и сфера нашей активности способствует подготовки и реализации существенных финансовых и административных условий.Не следует, однако забывать, что сложившаяся структура организации позволяет оценить значение систем массового участия. <img src="/images/smile.png" alt="smile" style="float: left;" />Разнообразный и богатый опыт укрепление и развитие структуры способствует подготовки и реализации новых предложений. Таким образом консультация с широким активом требуют от нас анализа существенных финансовых и административных условий. Товарищи! постоянный количественный рост и сфера нашей активности требуют определения и уточнения форм развития.</p>
</body>
</html>
Как это будет выглядеть:
Значимость этих проблем настолько очевидна, что постоянный количественный рост и сфера нашей активности способствует подготовки и реализации существенных финансовых и административных условий.Не следует, однако забывать, что сложившаяся структура организации позволяет оценить значение систем массового участия. Разнообразный и богатый опыт укрепление и развитие структуры способствует подготовки и реализации новых предложений. Таким образом консультация с широким активом требуют от нас анализа существенных финансовых и административных условий. Товарищи! постоянный количественный рост и сфера нашей активности требуют определения и уточнения форм развития.
СПОСОБ 1. ОБТЕКАНИЕ ПРИ ИСПОЛЬЗОВАНИИ HTML и CSS.
Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Страница</title>
<link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
<p>Значимость этих проблем настолько очевидна, что постоянный количественный рост и сфера нашей активности способствует подготовки и реализации существенных финансовых и административных условий.Не следует, однако забывать, что сложившаяся структура организации позволяет оценить значение систем массового участия. <img src="/images/smile.png" alt="smile" />Разнообразный и богатый опыт укрепление и развитие структуры способствует подготовки и реализации новых предложений. Таким образом консультация с широким активом требуют от нас анализа существенных финансовых и административных условий. Товарищи! постоянный количественный рост и сфера нашей активности требуют определения и уточнения форм развития.</p>
</body>
</html>
img {
float:left;
}
Выглядеть результат будет как и в первом способе.
Как вы уже должны были догадаться за обтекание картинки текстом отвечает свойство float, которое прижимает элемент к которому задается либо к правой стороне, либо к левой. А так же позволяет другим элементам, в том числе тексту обтекать его.
Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.
Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.
Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.
Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:
Мы обнаружили, что у вас установлено расширение AdBlock или программа Adguard или другое ПО, блокирующее показ рекламы на сайте. Мы прекрасно понимаем Вас, но реклама - единственный способ заработка сайта, его отсутствие мешает развитию. Поэтому хотели бы Вас попросить отключить блокирование рекламы на сайте. Со своей стороны обещаем не добавлять навязчивую рекламу - которая будет перекрывать сайт или открывать новые вкладки. Как отключить блокировку рекламы в adBlock Как отключить блокировку рекламы в Adguard В противном случае это сообщение будет переодически показываться Вам, большое спасибо за понимание.
Разнообразный и богатый опыт укрепление и развитие структуры способствует подготовки и реализации новых предложений. Таким образом консультация с широким активом требуют от нас анализа существенных финансовых и административных условий. Товарищи! постоянный количественный рост и сфера нашей активности требуют определения и уточнения форм развития.
Добавить комментарий
Авторизоваться с помощью: