0

我需要创建一个站点（一页原始内容），如果我使用 1140px/12 列系统（http://cssgrid.net/），左侧 3 列，中间 6 列，3在右侧。

左边的条带将包含控件，可能主要是一个 Treeview。

“巨大”的中间部分将是 Bing 地图。

在手机或平板电脑上查看时，我需要将地图固定为中心。

这是否适用于 1140/12 项目，还是我应该转向另一个方向？

4

1 回答 1

1

我将从创建示例布局开始，这样我们就可以确定我们在那里谈论的是同一件事。3+6+3 网格的基本布局为：

<div class="container">
    <div class="row">
        <div class="threecol"></div>
        <div class="sixcol"></div>
        <div class="threecol"></div>
    </div>
</div>

有 3 个 divwidth设置了百分比并float: left;应用于向他们展示买方。然后将窗口大小调整为小于 768px 的宽度，媒体查询开始工作。此媒体查询将从列中删除浮动，并使它们各自占据 100% 的宽度。

所以简短的回答不是，中间的列不会停留在屏幕的中心，它会被推到左边的列下面，占据屏幕宽度的 100%，也会占据屏幕宽度的 100%。第三列也将被推到第二列下方并占据 100% 的宽度。

如果您只需要将地图留在其他列的顶部以便首先看到，我建议编写媒体查询，将在手机上隐藏左列并在灯箱中单击时打开它，然后用户将需要它。

如果您需要将它们并排显示在同一个屏幕上，您可能需要为您的网格编写自己的类。

于 2013-02-23T16:44:10.030 回答