Задачка на тему CSS

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

    Код:
    <div id="grid">
        <div id="A">A</div>
        <div id="B">B</div>
        <div id="C">C</div>
        <div id="D">D</div>
        <div id="E">E</div>
    </div>

    Требуемый результат:
    image

    Оригинальное решение будет представлено завтра или раньше, если кто-нибудь напишет о нем в комментариях.

    PS: решение представлено здесь habrahabr.ru/blogs/css/109276

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 120

      +15
      а у вам есть решение?
      устаревшие браузеры — это ие6- или ие8-?
      резиновая только по ширине или и по высоте?

      можно подробнее про задание? ато в данной формулировке его можно легко решить с помощью отрицательных марджинов.

      Почему именно такая расстановка блоков? Например, E должен быть 50% шириной и 50% высотой?

      И самое главное — подобные задачи, как и порнуха, должны иметь сюжет, тогда интереснее решать ;)
        +2
        А должен быть высотой 50пикселей или 40% от высоты окна браузера?
          +1
          плюс не ясно насчет блока С, толи он 100% по ширине и 30% по высоте, толи 75% по ширине
            0
            на счёт ширины блока С я догадался по позиции буквы С (я так понял, она ровно посередине). Но да, условие недостаточно полное.
          –7
          Порнуха с сюжетом совершенно неинтересна )
          +2
          суть задачи не в размерах и процентах, а в компоновке. можно представить решения с любыми процентами, лишь бы компоновка соответствовала картинке. точного решения не требуется
            0
            на базе margin устраивает?
              0
              кидайте любые варианты
                0
                dashed-линия, обозначающая центр — нужна?
                  0
                  нет, пунктир не нужен
                    +1
                      0
                      компоновка не резиновая. меняю ширину главного дива и все разваливается.

                      вообще, в условии было указано о том, что не должно быть абсолютного позиционирования, даже для главного дива (у вас указаны высота и ширина),

                      по хорошему, компоновка должна производится на все пространство окна браузера

                      но как вариант — принимается, за неимением других
                        +10
                        А как запрет на абсолютное позиционироание влечет за собой запрет на явное указание высоты и ширины?
              0
              если компоновка это слои, то z-index
                0
                представьте готовое решение
              0
              Если кто-то хочет решать, вот шаблон: pastebin.com/AwwqxhvK
                +9
                  0
                  не успел своё допереписать) твоё — отличное.
                    0
                    решение хорошее, впечатление немного портит скролл, но это мелочи.
                      0
                      внес правку, забыл тестовый бордер у #grid убрать.
                        0
                        border можно заменить на outline. но у меня в фоксе 3.5 вертикальный скролл в высоту экрана
                          +3
                          ой. вот ссылка.
                          pastebin.com/yghWZpHn
                          0
                          body { overflow : hidden; } ?
                            0
                            беда этого решения еще и в трудностях с padding для главного блока, добавив padding: 20px в #grid я не получил ожидаемого результата
                              0
                              естественно. его можно врапнуть или указывать ему margin
                                –2
                                это неестественно, это очевидные костыли
                                margin, кстати, не помогает
                                  +4
                                  это css) а задача какая?
                                    0
                                    да, это css, в котором хотелось бы использовать padding по его прямому назначению
                                    впрочем, решение есть, как вариант принимается
                        +6
                        Ребята, кидайте пожалуйста еще линки на тестовые странички! Каждый пастебин себе копировать и на локале открывать не айс ;)
                          +27
                          Зачем мучаться со страничками? cssdesk.com/
                            0
                            Ушло в закладки. Спасибо.
                              0
                              А есть такое же но только с js?
                          +8
                          Очень тривиальная задача.
                          cssdesk.com/XFjgW
                            0
                            * браузеронезависимо
                              0
                              от решения aubt почти не отличается, сервис хорош
                                +2
                                В корне отличается. Там позиционирование реализовано за счёт других блоков, что довольно хрупко. В моём же позиционируется совершенно независимо.
                                –2
                                пока лучшее решение,
                                но проблема с добавлением padding: 30px в #grid остается
                                  +4
                                  В условии об этом ни слова. И проблемы как-то не заметил, по крайней мере в FF4
                                    0
                                    ff 3.6
                                    нормальный отступ появился и от левого края и от верхнего
                                +38
                                «А так слабо?»

                                  0
                                  а чем в корне отличается от задачи в посте? те же z-index, те же отрицательные margin
                                    +5
                                    Внимательнее!
                                      +4
                                      в корень зри — внимательней ;)
                                      +2
                                      Блок B состоит из двух элементов. Cheat detected.
                                        0
                                        Костыль
                                        0
                                        не слабо.
                                          +5
                                          чертов хабр.
                                          cssdesk.com/ENeQx
                                            0
                                            mission impossible
                                              +37
                                                0
                                                труЪ :)
                                                  0
                                                  Мощно. А почему работает не объясните?
                                                    +4
                                                    По псевдоклассу блоку создали его продолжение, выпнув его в абсолют, предварительно поменяв отображение со встроенного на встроенно-блочный. Это гениально и просто.
                                                    0
                                                    Вы молодец, я даже не догадался до такого решения, но как мне кажется, это редко можно будет использовать в реальных ситуациях (когда к примеру в этих текстах будет текст, и текст в блоке #a будет в этом блоке все равно под блоком #D) Конечно если в блоках будут использоваться картинки, то возможно юзабельно. Хотя возможно я придираюсь, ведь никто не будет специально закрывать один блок с текстом другим. Отличное решение.
                                                  +6
                                                  Ответ CSS Grid Alignment Level 3 (http://dev.w3.org/csswg/css3-grid-align/) — 29-я спецификация из семейства CSS (предложена Microsoft).
                                                    –6
                                                    да, про этот ответ я и напишу в отдельном посте :-)
                                                      +7
                                                      Несмотря на то что это предложение действительно прагматично решает ряд задач, более безобразной технологией в CSS до данной была только одна — CSS Advanced Layout Module (попытка изобрести тот же велосипед)
                                                        –3
                                                        а в чем состоит безобразность по вашему?
                                                          +5
                                                          а) в том что CSS (Cascading Style Sheets) вообще не для layout создан (что здесь cascading?)
                                                          б) в синтаксе, например: grid-columns: auto minmax(min-content, 1fr);
                                                            –1
                                                            Кажется мне, что ничего тут страшного нет.
                                                            Во-первых, что здесь не может быть cascading? Во-вторых — почему это стили, отечающие за визуальное отображение котнента, не могут отвечать за раскладку его на странице? Это ведь ключевая составляющая визуального форматирования, как раз работа для стилей. То, что создание раскладок не включено в более ранние спецификации — скорее недоработка, чем принципиальное идеологическое решение.

                                                            Ну и не вижу, чем этот синтаксис хуже градиентов или транслейтов.
                                                              0
                                                              Хотелось бы все-таки более конструктивных возражений, раз уж они есть :)
                                                              0
                                                              один вопрос — а что тогда должно отвечать за layout?
                                                                0
                                                                если не css и не html
                                                      +1
                                                      А в чём, если не секрет, сакральный смысл отказа от абсолютного позиционирования?
                                                        +3
                                                          0
                                                          В резиновом design (необходимом, например, при разработке приложений). На данный момент есть только одна альтернатива: Flexible Box Layout Module (кстати в той или иной мере поддерживается во всех браузерах, включая IE9)
                                                            +2
                                                            (кстати в той или иной мере поддерживается во всех браузерах, включая IE9)

                                                            Во всех браузерах сказочного мира :)
                                                              +1
                                                              Не спорю. Flex Box — изобретение ранее доступное только в XUL. Я веду проект Ample SDK — JavaScript UI Framework, в нем [в числе прочего] есть реализация XUL для всех браузеров, для чего пришлось реализовать и Flex Box на HTML4/CSS1/JavaScript
                                                            +4
                                                            Что-то я не понял. А почему в «резиновом design» нельзя использовать position: absolute?
                                                              +1
                                                              можно, сглупил я, похоже
                                                          0
                                                          А в чём проблема применить z-index и position: relative?
                                                            +14
                                                            У меня еще одна задача. Придумать применение такой разметке. Кто справится?
                                                              +2
                                                              Как раку ногу оторвать…

                                                              Зайдите на www.automobiles.lt/ (не переживайте о рекламе, вы там, все равно, ничего не поймете), там слева (в рамке) есть реклама сайта про кино. Каждый раз при смене репертуара, приходится лепить новую картинку, а с приведенной структурой цсс, можно все сделать автоматически.
                                                                0
                                                                а при чём тут эта разметка?
                                                                  0
                                                                  Как минимум при том, что сетку рамок, в виде пнг файла, в этом месте использовать можно, но она не гибкаят, так как надо картинки подгонять, плакаты не одинаковые. А в данном случае система цсс, куда более гибкая.
                                                                +20
                                                                0
                                                                cssdesk.com/EuMPJ
                                                                Наша верстальщица наваяла. Никто не хочет с прекрасной девушкой инвайтом поделиться? :)
                                                                  0
                                                                  Фото вперед.
                                                                  0
                                                                  А если надо чтобы внешний контейнер занял всю высоту/ширину?
                                                                    0
                                                                    Да вроде без проблем
                                                                      0
                                                                      Молодчинка, супер!
                                                                    0
                                                                    Хм… а если надо размеры давать в абсолютных единицах? #A {...height:200px;...}
                                                                      0
                                                                      Тогда это уже другая задача.
                                                                      Требования: используется только CSS, не использовать абсолютное позиционирование, компоновка должна быть резиновой, вопросом поддержки устаревших браузеров можно пренебречь.

                                                                        –1
                                                                        Согласен, все же интересно как решить дополненную задачу.
                                                                      +1
                                                                      если текста больше, то он появляется в неожиданных местах
                                                                      cssdesk.com/y9ax2
                                                                      с точки зрения практики, а не задачи о сферических конях в вакууме это очень очень очень плохо
                                                                        0
                                                                        Радует, что мы тут как раз о конях. По крайней мере, пока XaocCPS свой следующий пост не написал :)
                                                                          +1
                                                                          Это из-за line-height
                                                                          +1
                                                                          Спасибо всем сочувствующим — добрый человек demonstr пригласил к нам милую даму.
                                                                          +2
                                                                          Я решил вот так cssdesk.com/Vqak8
                                                                            0
                                                                            А если надо размеры давать в абсолютных единицах? #A {...height:200px;...}
                                                                              0
                                                                              Тоже решал: cssdesk.com/sLDdU
                                                                              Тока не знаю как отцентрировать буквы, сейчас твой варинт буду изучать )
                                                                                +1
                                                                                если текста больше, то он появляется в неожиданных местах
                                                                                см. cssdesk.com/NRL6g

                                                                                решение проблемы вертикального центрирования через content не очень хорошее, но выбора нет)
                                                                                  0
                                                                                  Какая задача, такое и решение =)
                                                                                    0
                                                                                    ну я просто стараюсь рассматривать еще практические аспекты применения
                                                                                    в данном случае хотелось бы помимо всего прочего избежать внезапных выползаний текста, например сделать скроллинг или просто не отображать то что выползло
                                                                                +3
                                                                                Без абсолютного позиционирования довольно просто, а без относительного слабо? :)
                                                                                  +2
                                                                                  А z-index-ы как расставлять?
                                                                                    +5
                                                                                    а без z-index'ов слабо? так что угодно можно довести до абсурда…
                                                                                  +1
                                                                                    +2
                                                                                    Ну так в css можно и линки на картинки прописывать. По этому можно сделать универсальный метод:
                                                                                    grid — фоновая картинка с изображение того что должно быть, а ABCD — сделать невидимым.
                                                                                      0
                                                                                        0
                                                                                        начните уменьшать высоту браузера и вы заметите, что див D уедет вниз относительно нижней стороны дива A

                                                                                        центровка текста по вертикали нечестная, стоит вписать текста побольше, и все поедет
                                                                                        0
                                                                                        Чую, до меня уже решили не раз.
                                                                                        Однако же, вот: pastebin.com/1KGapvAK
                                                                                          +3
                                                                                          без z-index и релатив: cssdesk.com/XrFQX
                                                                                            0
                                                                                            float — отличная замена z-index
                                                                                            +1
                                                                                            pastebin.com/BppNiK57 — простое решение. Все требования соблюдены :)
                                                                                              0
                                                                                              Кажется, уже пора опубликовать оригинальное решение.
                                                                                              0
                                                                                              Хм, ну ладно всех интересует смысл этой задачки, но меня интересует другое: это якобы сложно? Я либо отстал со своей занятостью от мира, либо я даже не знаю что думать. Интересно было бы услышать ответ.

                                                                                              Only users with full accounts can post comments. Log in, please.