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

发布于 2024-07-18 00:07:15 字数 232 浏览 5 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怕倦 2024-07-25 00:07:15

Web 开发的一大好处是，大多数情况下，当您看到一个网站并思考“他们是如何做到这一点”时，很容易查看代码并找出答案，也可以对其进行测试 - 像 < a href="http://getfirebug.com" rel="nofollow noreferrer">Firebug for 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

这可以设置为“两者”、“左”或“右”，并且基本上会重置容器上的浮动。

然而，听起来你正在追求所谓的“CSS 的圣杯” （Rick 指出 IE7 存在一个错误，请参阅此处进行修复）有充分的理由：三列，其中至少一列是灵活的。

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

One of the great things about web development is that most often, when you see a site and think "How did they do that", it's very easy to look at the code and find out, and also to test it out - tools like Firebug for Firefox, the Developer Tools in IE 8 (F12) and Chrome will all display nicely formatted source and CSS, and will let you modify it in situ.

In the case of SO, the main body of the site is contained in a div with class of "container", the style rules for "container" are:

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

The key thing we're looking at here is that this class has a fixed width - 950 pixels, and the margins are set to (expanded):

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

Setting the left and right margins to "auto" has the affect of centering the div within the edges of it's container, and allowing them to expand to whatever width is needed once the container has taken up the required 950px.

Inside the container div, you then have a div with id "content" (no style rules), and then two divs: "mainbar" and "sidebar" whose styles are:

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

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

These left and right floats are what's positioning the bars in the right places.

Another handy CSS rule is:

clear

this can be set to "both", "left" or "right", and will basically reset the floats on the containers.

However, it sounds like you're after what is often called the "Holy Grail of CSS" (Rick points out that there's a bug in this with IE7, see here for a fix) for good reason: Three Columns, with at least one of them flexible.

Other examples, of completely flexible layouts include:

回复收藏 0 原文

灼痛 2024-07-25 00:07:15

它可以是浮动、位置和边距以及如何设置这些元素的组合。如果没有 URL，就很难确切地说出问题是什么或如何解决它。

作为一个起点，我建议看一下 YUI CSS 网格或 960.gs（960 网格系统）以及那里浮动的各种 reset.css 文件之一。 YUI 有一个非常好的。 reset.css 文件使您的 css 在所有浏览器中的外观和行为都相同，并且网格系统为您提供了设计站点的起点。它们还让您确信您所设计的内容在所有浏览器中的外观和行为都相同。

http://developer.yahoo.com/yui/grids/
http://960.gs/

回复收藏 0 原文