Горизонтальная веб-страница в WebKit - PullRequest
Новая
       8

Горизонтальная веб-страница в WebKit

1 голос
/ 15 января 2011

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

Ниже приведен основной вариант моей страницы. Я также поиграл с идеей поворота тела на 90 градусов, но быстро столкнулся с ограничениями. 

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            * {
                -webkit-box-sizing: border-box;
            }
            body {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 4000px;
            }
            .box {
                display: inline-block;
                height: 99%;
                width: 300px;
                margin: 5px;
                border: 1px solid #000;
                background-color: #FBF;
                -webkit-transition: all 500ms linear;
            }
            .box:hover {
                width: 600px;
            }
        </style>
    </head>
    <body>
        <div class="box">One</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
    </body>
</html>

Меня не интересует совместимость в других браузерах, но она должна работать в последних версиях WebKit (Safari 5, Chrome 9 и т. Д.).

edit: Просматривая базовую таблицу стилей для webkit Я обнаружил свойство '-webkit-block-flow'. Я не смог найти много информации об этом, но это может дать мне поведение, которое я ищу.

Ответы [ 2 ]

0 голосов
/ 28 января 2011

Используя тип отображения -webkit-box, я смог добиться именно того, что искал.Я разместил исправленный код ниже. 

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            * {
                -webkit-box-sizing: border-box;
            }
            body {
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                position: absolute;
                top: 0;
                bottom: 0;
            }
            .box {
                width: 300px;
                margin: 5px;
                border: 1px solid #000;
                background-color: #FBF;
                -webkit-transition: all 500ms linear;
            }
            .box:hover {
                width: 600px;
            }
        </style>
    </head>
    <body>
        <div class="box">One</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
    </body>
</html>
0 голосов
/ 15 января 2011

Мне кажется, что самым простым решением будет неупорядоченный список с элементами списка, содержащими основной текст / контент.

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

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

...