Фальсификация float:center с помощью псевдо элементов

Допустим, требуется сверстать страницу следующим образом:


Реальный пример, не так ли? Особенно, если статья написана про кота, который обожает находиться в центре внимания.

Сделать такую верстку не так просто, как кажется. Текущие методы построения шаблона не принимают во внимание данный вариант размещения текста и изображения. Иногда кажется, что разработчики вообще не принимают во внимание такую штуку, как "веб дизайн". Даже с помощью рабочих сред CSS такая верстка не получится идеальной. Это очень похоже на использование float, так как текст обтекает изображение. Но в примере текст обтекает изображение с двух сторон. Такое поведение идеально подходит для  правил float: center; или float: both;, которых пока не существует.

Однако задача вполне решаема! Доказательство смотрите на демонстрационной странице.

Для решения будем использовать обтекание псевдо элементов, которые резервируют место для изображения. Мы будем размещать их на каждой колонке текста, один будет обтекаться слева, а другой справа. Для колонок текста будем использовать элементы  div. Псевдо элементы должны иметь такую же высоту, как и изображение, а ширина должна составлять половину ширины картинки (или около того ... нужно помнить еще и об отступах).

Вот код:

#l:before, #r:before {
  content: "";
  width: 125px;
  height: 250px;
}
#l:before {
  float: right;
}
#r:before {
  float: left;
}


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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/3LJflMa3eRQ/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Фальсификация float:center с помощью псевдо элементов | | 2012-06-19 12:09:25 | | Статьи Web-мастеру | | Допустим, требуется сверстать страницу следующим образом:Реальный пример, не так ли? Особенно, если статья написана про кота, который обожает находиться в центре внимания.Сделать такую верстку не так | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: