Много раз, просматривая Интернет страницы на различных сайтах, как на русско-язычных, так и в англо-язычном секторе, заметил, что не у всех, получается "вписать" рекламные блоки, в частности я говорю об Google AdSense, в свой контент. И поверьте, смотрится это не очень хорошо, тем более, что такой подход плохо будет играть на кликабельность. Кто-то может со мной не согласиться, что ж - его право, но во многих советах по AdSense говориться именно о том, чтобы сделать объявления похожими внешне на ваш сайт.
Мы тут не будем говорить об цветовых сочетаниях, размерах и формах объявлений. Наша цель, показать, как с помощью CSS можно красиво расположить свои объявления. Итак...
Рассмотрим свойства элемента float.
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое — одна строка обтекающего текста может быть на той же линии, что и сам элемент. Имеет три аргумента: float: left | right | none
Аргументы
- left
- Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
- right
- Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
- none
- Обтекание элемента не задается.
Теперь рассмотрим конкретный пример, как можно применить float на практике.
01Вы захотели, чтобы текст огибал ваше объявление по правой стороне (пример html кода ниже):
Пример кода
<div style="float:left; margin:5px">
// код вашего объявления Google Adsense
</div>
Описание
float: left; /* Обтекание по правому краю */
margin: 5px; /* Отступы вокруг */
02Вы захотели, чтобы текст огибал ваше объявление по левой стороне (пример html кода ниже):
Пример
<div style="float:right; margin:5px">
// код вашего объявления Google Adsense
</div>
Описание
float: right; /* Обтекание по левому краю */
margin: 5px; /* Отступы вокруг */
