<rmcreative>

RSS

Сложное обтекание текстом

26 января 2011

Иногда, особенно при оформлении промо-страничек, так и хочется сдалать «журнальную» обложку с текстом заметки, который обтекает иллюстрацию. Многие верстальщики, видя такое, сразу говорят, что это невозможно. Однако, немного подумав, сверстать «как в журнале» можно.

Если картинка квадратная, то решается наша задача довольно просто. Свойство float с соответствующим значением left или right вполне решает нашу проблему. Но что же нам делать с яблоком?!

На самом деле наше яблоко почти ничем не отличается от квадратного… разве что квадрат получается не один.

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

Для лучшего понимания можно навести мышь на яблоко и посмотреть код.

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

  1. №3796
    Ti
    Ti 26.01.2011, 7:15:09

    похожее задание было у Лебедева на собеседовании в 2007 http://www.artlebedev.ru/job/might-be-hard/

  2. №3797
    Чистяков Денис
    Чистяков Денис 26.01.2011, 7:28:28

    Спасибо, очень интересное решение, для некоторых сайтов наверно подошло бы.

  3. №3798
    Тормоз
    Тормоз 26.01.2011, 8:06:14

    Изврат. Давно пора понять, сайт - это не журнал.

  4. №3799
    ifman
    ifman 26.01.2011, 9:55:00

    Красиво, но все равно все вручную же:) Ну то есть, на поток такую верстку все равно не поставишь. Но все равно забавно. Если бы пришлось делать такое - сделал бы просто кучку дивов, каждый из которых содержит текст, что разорвало бы текст в клочки. Такое решение красивое, да.

  5. №3800
    Сергей М.
    Сергей М. 26.01.2011, 10:43:24

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

    И, кстати, и на поток можно - достаточно всего лишь один раз при посте проанализировать картинку на предмет белого по краям, чтобы построить простую "дивницу".

  6. №3801
    Sam
    Sam 26.01.2011, 12:13:44

    ifman, Сергей М., Обтекание картинок уже автоматизировано. В этом решении на выходе похожий код.

    Ti, мелкие скрипты для braingames.ru были одним из первых моих фрилансов :)

  7. №3802
    Андрей
    Андрей 26.01.2011, 12:16:46

    Не универсально к сожалению

  8. №3803
    Ден
    Ден 26.01.2011, 12:20:57

    мне все понравилось! но я у Лебедева тоже такое уже видел!

  9. №3804
    ifman
    ifman 26.01.2011, 12:23:04

    Sam, ты же понимаешь что это то же самое почти) Все равно под каждую картинку нужно что-то делать отдельно. Ну то есть, я все еще не могу воткнуть в статью картинку с белым фоном и присвоив ей класс, например, добиться неровного обтекания, ты же понимаешь.

    Но сервис забавный, спасибо.

  10. №3805
    Sam
    Sam 26.01.2011, 12:37:07

    ifman, это да, но обтекание такое требуется тоже не настолько часто.

  11. №3806
    ifman
    ifman 26.01.2011, 12:41:26

    Sam, ну не знаю. Если бы оно работало так просто, я бы только им и пользовался при верстке именно текста.

  12. №3807
    Sam
    Sam 26.01.2011, 13:48:11

    ifman, вообще можно, конечно, пошаманить и сделать решение на JavaScript. Вот только не так оно часто надо.

  13. №3808
    fazeful
    fazeful 26.01.2011, 14:25:04

    Пасибо! Теперь я знаю куда отправлять людей, которые скажут что так нельзя ;)

  14. №3809
    wocreator
    wocreator 26.01.2011, 15:36:12

    Круто. Спасибо. Sam, тоже огромное спасибо за ссылку. Удобно

  15. №3810
    ifman
    ifman 26.01.2011, 15:41:24

    wocreator, Sam и есть автор блога)

  16. №3811
    Тормоз
    Тормоз 26.01.2011, 17:03:53

    Я тут подумал, может тебя напрягает, что ты у меня в блогролле как "Чувак из Воронежа"? ) Я даже не помню уже, почему тебя так написал. Лучше сменить на Алексардра Макарова?

  17. №3812
    Тормоз
    Тормоз 26.01.2011, 17:04:30

    Блин! Прошу прощения за опечатки, я осетровый бамбук.

  18. №3813
    Sam
    Sam 26.01.2011, 18:37:29

    Тормоз, я и есть из Воронежа, но можно и сменить :)

  19. №3814
    Ekstazi
    Ekstazi 26.01.2011, 21:31:13

    Изящно, но извратно.

  20. №4451
    Some Guy
    Some Guy 19.04.2011, 23:20:32

    С точки зрения типографики это выглядит ужасно, особенно правая колонка.

  21. №4452
    Sam
    Sam 20.04.2011, 5:53:37

    Some Guy, это уже я такие отступы сделал. Добиться хорошего вида возможно.

  22. №8932
    keith flint
    keith flint 06.04.2014, 16:35:28

    чето яблок захотелось...

  23. №10022
    Елена
    Елена 16.10.2015, 15:18:45

    Спасибо большое! Красота неописуемая! Очень пригодилось для особо сложной верстки. Еще пришлось один див сделать подложкой и наложить на другой, но результат - тот, что надо!

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.