asp.net - 如果我需要始终保持网站的中间位置，那么 1140px CSS 网格系统是否可以工作？

Question

如果我使用 1140px/12 列系统 ( http://cssgrid.net/ )，我需要创建一个网站(原始内容的一页)，左边 3 列，中间 6 列，右边 3 列对。

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

“广阔”的中间部分将是 Bing map 。

在手机或平板电脑上查看时，我需要将 map 固定在中心位置。

这是否适用于 1140/12 元素，还是我应该换个方向看？

Answer 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 个 div 的 width 设置为百分比，并且 float: left; 应用于向他们展示双方。然后将窗口调整为小于 768px 的宽度，媒体查询开始工作。此媒体查询将从列中删除 float 并使它们各自占据 100% 的宽度。

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

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

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