android - div 内有多个 div 的响应式布局

Question

我一直在尝试为我的网站制作一个响应式布局。但是我在这个元素上迟到了，而且我在没有一个的情况下就开始了它，这意味着我的基本模板有很大的缺陷。 我想知道如何制作这样的模板？我相信制作这样的模板(在图片中)真的很简单，但我真的不知道 div 似乎如何按照他们的意愿移动，而不是按照我的命令移动。

我想从那张照片中得到的正是那里写的。由于浏览器视口(viewport)较小，div 的行为应该与我在图片中举例说明的方式相同。

如果无论如何可以指出如何制作这样的东西，我将不胜感激:)

这是图片的链接:http://i.imgur.com/8n0TOlo.jpg

Answer 1

我是 PocketGrid 的作者，这是一个用于响应式布局的微型 CSS 网格。

正如 Luca 所建议的，您可以使用 PocketGrid 进行布局。

我为你做了一个 JSFiddle:http://jsfiddle.net/arleray/5Mvph/

HTML 非常简单:

<div id="LAYOUT" class="block-group">
    <div id="HEADER" class="block">
        <div class="box">HEADER</div>
    </div>
    <div id="WORK_AREA" class="block-group">
        <div id="LEFT_BAR" class="block">
            <div class="box">LEFT_BAR</div>
        </div>
        <div id="CONTENT" class="block">
            <div class="box">CONTENT</div>
        </div>
    </div>
    <div id="TOOLBOX" class="block-group">
        <div class="TOOLBOX_ITEM block">
            <div class="box">TOOLBOX ITEM</div>
        </div>
        <div class="TOOLBOX_ITEM block">
            <div class="box">TOOLBOX ITEM</div>
        </div>
        <div class="TOOLBOX_ITEM block">
            <div class="box">TOOLBOX ITEM</div>
        </div>
    </div>
</div>

对于您的 CSS，我建议您使用“移动优先”策略:

1 - 从“移动”版本(最小的)开始:

#LAYOUT { min-width: 800px; }
#HEADER { height: 30px; }
#WORK_AREA { width: 100%; }
#LEFT_BAR { width: 300px; }
#CONTENT {
    overflow: hidden; /* Trick to fill the remaining space */
    float: none;
    width: auto;
}
#TOOLBOX {
    min-width: 300px;
    width: 100%;
}

2 - 然后为较大版本(> 1100 像素)添加媒体查询以仅添加来自移动版本的更改:

@media (min-width: 1100px) {
    #WORK_AREA { width: calc(100% - 300px); }
    #TOOLBOX { width: 300px; }
}

对于流畅的 CONTENT 宽度，我使用了“overflow:hidden”技巧使其填充 LEFT_BAR 之后 WORK_AREA 的剩余空间。
然而，为了使右侧固定工具栏的 WORK_AREA 流畅，我不能使用“溢出:隐藏”(因为它填充了右侧的剩余空间)。
由于正确的固定宽度工具箱，我不得不使用 calc() 函数来计算 WORK_AREA 宽度。

注意:calc() 函数仅与 Android 4.4+ ( http://caniuse.com/calc ) 兼容，但它是在右侧左侧具有流动 WORK_AREA 的唯一方法(使用纯 CSS)侧边栏，因为 TOOLBOX 是在 WORK_AREA 之后声明的。
您可以尝试使用这个 calc() polyfill(在 JS 中):https://github.com/CJKay/PolyCalc

要使用“溢出:隐藏”技巧而不是 calc() 函数，您应该将工具箱放在 WORK_AREA 之前，就像在其他 JSFiddle 中一样:http://jsfiddle.net/arleray/5Mvph/11/

有关PocketGrid的更多信息，您可以在此处查看许多示例:http://arnaudleray.github.io/pocketgrid/docs/

希望这对您有所帮助!