Question

我正在尝试创建一个与“The Horizontal Way”相似的网页。目标是在不设置主体宽度的情况下使所有容器盒水平放置而不是垂直放置。

Bellow是我页面的基本版本。我也玩过旋转身体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等）的新版本。

编辑：在查看基座stylesheet for 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>

WebKit中的水平网页

2 个答案: