Транспонирование элементов div с использованием CSS - PullRequest
Новая
       3

Транспонирование элементов div с использованием CSS

3 голосов
/ 18 марта 2011

Я перейду к примеру. 

<!DOCTYPE html>
    <head>
        <title>Transposing div using CSS</title>

        <style>
            div#wrapper {
            }

            div#menu {
                border:blue solid 1px;
            }

            div#main {
                border:red solid 1px;
            }
        </style>
    </head>

    <body>
        <p>How do we show the menu div immediately after the content div?</p>
        <div id="wrapper">
            <div id="menu">Menu</div>
            <div id="main">Content</div>
        </div>
    </body>
</html>

В браузере div меню будет первым в потоке. Теперь предположим, что мне нужно изменить макет так, чтобы «Меню» следовало за содержимым содержимого div. Как это можно сделать с помощью только CSS. Это означает, что не нужно вносить никаких изменений в HTML (не нужно обнаруживать пользовательский агент) и нет кода JavaScript.

Основной метод CSS для позиционирования элементов - использовать атрибут float: right | left. Это хорошо работает для перемещения элементов относительно их ограничительной рамки, но я смотрю на перемещение элемента в конце его элемента-преемника в нормальном потоке.

А вот и пример использования. Я хочу, чтобы веб-сайт оптимально отображался в браузерах с небольшим экраном, как на iPhone. В настоящее время на веб-сайте есть меню вверху и содержание внизу, очень распространенный макет, но на iPhone недвижимость настолько ограничена, что было бы предпочтительно иметь меню, следующее за основным текстовым содержимым.

Решение должно работать только с мобильными телефонами iPhone и Android ( на базе WebKit ). Поэтому нет необходимости учитывать Internet Explorer хаки и тому подобное.

Ответы [ 2 ]

2 голосов
/ 19 марта 2011

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

div#wrapper {
    height: 100%;
    padding-bottom: 100px;
    position: relative;
}

div#menu {
    border:blue solid 1px;
    position: absolute;
    bottom: -2px; /*to offset the border pxs*/
    height: 100px;
    width: 100%;  
}

div#main {
    border:red solid 1px;
}

Вы можете посмотреть его в действии здесь: http://jsfiddle.net/3ZheQ/

0 голосов
/ 18 марта 2011

Я еще не пробовал это на мобильных телефонах, но я часто делал это на обычных сайтах. Я обычно делал это так, чтобы обернуть и .menu, и .menu_section в .header div. Затем вы устанавливаете базовый margin-top в .menu div и добавляете position:relative в .header. Теперь заголовок - ваш последний родственник для .menu и .menu_section.

Теперь просто установите position:absolute на .menu_section, и вы можете установить верхнее поле на 0. .menu будет смещено на верхнее поле, в то время как .menu_section будет абсолютно позиционировано в верхней части заголовок.

Если дизайн требует этого, вы можете устранить любое перекрытие с помощью z-индексов (но вы все равно не работаете со старыми версиями Internet Explorer, так что, вероятно, вас это не побеспокоит).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...