Question

我一直在努力为我的网站制作一个有点响应的布局。但是我在这个项目上已经很晚了，而且我已经开始没有了，这意味着我的基本模板有很大的缺陷。我想知道如何制作这样的模板？我相信制作这样的模板（在图片中）真的很简单，但我真的不知道div如何按照自己的意愿移动，而不是像我命令的那样。

我想从那幅画中得到的正是那里所写的。由于浏览器视图端口较小，因此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 - 然后为较大版本（> 1100px）添加媒体查询，仅添加移动版本的更改：

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

对于流体CONTENT宽度，我使用“overflow:hidden”技巧使其在LEFT_BAR之后填充WORK_AREA的剩余空间。
尽管如此，为了使WORK_AREA流体与右侧的固定工具栏一起使用，我无法使用“overflow：hidden”（因为它填充了右侧的剩余空间）。
所以我必须使用calc()函数来计算WORK_AREA宽度，因为右边是固定宽度的工具箱。

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

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

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

希望这有帮助！

Answer 2

您可以在css引用media queries here中使用媒体查询，也可以使用Bootstrap之类的框架。这将帮助您根据设备大小控制div。

Answer 3

尝试bootstrap。它会让你的生活轻松链接here。希望有所帮助

Answer 4

我建议你使用另一个非常简单和简约的网格系统：PocketGrid。只有1 KB缩小。在演示和描述中嘲笑。 ; - ）

响应式布局，div内有多个div

4 个答案: