div内具有多个div的响应式布局

Question

我一直在尝试为我的网站进行某种程度的响应式布局。 但是我在该项目上很晚，没有一个项目就已经开始了，这意味着我的基本模板有很大的缺陷。 我想知道如何制作这样的模板？ 我相信制作这样的模板（如图）真的很简单，但是我真的不知道div似乎按照他们的意愿移动，而不是按照我的命令。

我想要的那张照片正是那里写的。 由于浏览器的视口较小，因此div的行为应与我在图像中示例的方式相同。

如果无论如何可以指出我如何做这样的事情，我将不胜感激:)

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

Answer 1

我是PocketGrid的作者，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，因为在WORK_AREA之后声明TOOLBOX。
您可以尝试使用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引用媒体查询中使用媒体查询，也可以使用Bootstrap之类的框架。 这将帮助您根据设备大小控制div。

Answer 3

尝试启动。这将使您的生活轻松链接在这里。希望有帮助

Answer 4

我建议您使用另一个非常非常简单的Grid系统： PocketGrid 。 压缩后只有1 KB。 抢劫演示和描述。 ;-)