Сложное обтекание текстом
26 января 2011
Иногда, особенно при оформлении промо-страничек, так и хочется сдалать «журнальную» обложку с текстом заметки, который обтекает иллюстрацию. Многие верстальщики, видя такое, сразу говорят, что это невозможно. Однако, немного подумав, сверстать «как в журнале» можно.
Если картинка прямоугольная, то решается наша задача довольно просто. Свойство float с соответствующим значением left или right вполне решает нашу проблему. Но что же нам делать с яблоком?!
На самом деле наше яблоко почти ничем не отличается от прямоугольного… разве что прямоугольник получается не один.
Текст будет идти в две колонки, поэтому мы делим яблоко на две части. Далее сверху вниз у нас выходят отступы с разной шириной. На каждый из таких отступов заводим отдельный элемент div. Сразу после блоков- отступов размещаем текст.
Для лучшего понимания можно навести мышь на яблоко и посмотреть код.
Комментарии RSS по email OK
похожее задание было у Лебедева на собеседовании в 2007 http://www.artlebedev.ru/job/might-be-hard/
Спасибо, очень интересное решение, для некоторых сайтов наверно подошло бы.
Изврат. Давно пора понять, сайт - это не журнал.
Красиво, но все равно все вручную же:) Ну то есть, на поток такую верстку все равно не поставишь. Но все равно забавно. Если бы пришлось делать такое - сделал бы просто кучку дивов, каждый из которых содержит текст, что разорвало бы текст в клочки. Такое решение красивое, да.
@Тормоз: ну, ты не прав. Бывают сайты-журналы, бывают сайты-визитки, бывают промо-сайты. Бывают, наконец, красиво сверстанные в хтмле (не единой картинкой) рекламные блоки и просто блоки - двуколоночная и более - очень ходовая вещь, когда нужно не читать весь текст, а презентовать разделы, например. И обтекание с одной стороны короткого текста не будет мешать читаемости, а позволит насладиться глазу (и еще сэкономит место).
И, кстати, и на поток можно - достаточно всего лишь один раз при посте проанализировать картинку на предмет белого по краям, чтобы построить простую "дивницу".
ifman, Сергей М., Обтекание картинок уже автоматизировано. В этом решении на выходе похожий код.
Ti, мелкие скрипты для braingames.ru были одним из первых моих фрилансов :)
Не универсально к сожалению
мне все понравилось! но я у Лебедева тоже такое уже видел!
Sam, ты же понимаешь что это то же самое почти) Все равно под каждую картинку нужно что-то делать отдельно. Ну то есть, я все еще не могу воткнуть в статью картинку с белым фоном и присвоив ей класс, например, добиться неровного обтекания, ты же понимаешь.
Но сервис забавный, спасибо.
ifman, это да, но обтекание такое требуется тоже не настолько часто.
Sam, ну не знаю. Если бы оно работало так просто, я бы только им и пользовался при верстке именно текста.
ifman, вообще можно, конечно, пошаманить и сделать решение на JavaScript. Вот только не так оно часто надо.
Пасибо! Теперь я знаю куда отправлять людей, которые скажут что так нельзя ;)
Круто. Спасибо. Sam, тоже огромное спасибо за ссылку. Удобно
wocreator, Sam и есть автор блога)
Я тут подумал, может тебя напрягает, что ты у меня в блогролле как "Чувак из Воронежа"? ) Я даже не помню уже, почему тебя так написал. Лучше сменить на Алексардра Макарова?
Блин! Прошу прощения за опечатки, я осетровый бамбук.
Тормоз, я и есть из Воронежа, но можно и сменить :)
Изящно, но извратно.
С точки зрения типографики это выглядит ужасно, особенно правая колонка.
Some Guy, это уже я такие отступы сделал. Добиться хорошего вида возможно.
чето яблок захотелось...
Спасибо большое! Красота неописуемая! Очень пригодилось для особо сложной верстки. Еще пришлось один див сделать подложкой и наложить на другой, но результат - тот, что надо!