asp.net-mvc - 当浏览器调整大小时，防止页面上的各个部分被重新定位的机制是什么

Question

在本网站中，当您缩小浏览器窗口时，左侧和右侧的空白区域首先消失，然后右侧面板缩小，然后是主容器面板。我最近开始使用 ASP.NET MVC，在我的测试用例中，当我调整浏览器窗口大小时，我的容器下降到其他容器下方。我正在使用一个 site.master 页面，其中包含左、中和右部分作为正文的一部分。它在 css 中有一个属性来指示行为或 HTML 元素？我已经查看了该站点主页的页面源代码并查看了 CSS，但没有任何明显的信息跳出来说明这是如何控制的。

Answer 1

Web 开发的一大优点是，大多数情况下，当您看到一个网站并想“他们是怎么做到的”时，很容易查看代码并找出答案，也很容易对其进行测试 - Firebug 等工具对于 Firefox，IE 8 (F12) 和 Chrome 中的开发人员工具都将显示格式良好的源代码和 CSS，并允许您就地修改。

在SO的情况下，站点的主体包含在类为“container”的div中，“container”的样式规则是:

.container {
  margin: 0 auto;
  text-align: left;
  width: 950px;
}

我们在这里看到的关键是此类具有固定宽度 - 950 像素，边距设置为(扩展):

margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

将左右边距设置为“自动”会影响 div 在其容器边缘居中，并允许它们在容器占据所需的 950 像素后扩展到所需的任何宽度。

在容器 div 中，您有一个 id 为“content”的 div(无样式规则)，然后是两个 div:“mainbar”和“sidebar”，其样式为:

#mainbar {
  float: left;
  margin-bottom: 40px;
  width: 715px;
}

#sidebar {
  float: right;
  width: 220px; /* this is also set in the "style" attribute *
}

这些左右浮动是将条形图定位在正确位置的原因。

另一个方便的 CSS 规则是:

clear

这可以设置为“both”、“left”或“right”，并且基本上会重置容器上的 float 。

但是，这听起来像是您在追求通常称为“Holy Grail of CSS”的东西(Rick 指出 IE7 中存在一个错误，请参阅 here for a fix)，原因很充分:三列，至少其中之一是灵活的。

其他完全灵活的布局示例包括:

• Multi-column layouts climb out of the box
• Fluid grids