WebKit中的水平网页

Question

我正在尝试创建类似于“ 水平方式 ”的网页。 目的是在不设置主体宽度的情况下，使所有容器盒水平而不是垂直下落。

波纹管是我页面的基本版本。 我也尝试过将身体旋转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等）中都可以使用。

编辑：在查看webkit的基本样式表时，我遇到了'-webkit-block-flow'属性。 我无法找到很多有关此的信息，但这可能会给我所需的行为。

Answer 1

在我看来，最简单的解决方案是将列表元素包含正文/内容的无序列表。

Answer 2

使用-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>