在此网站中，当您缩小浏览器窗口时，左侧和右侧的空白首先消失，然后是右侧面板的缩小，然后是主容器面板。我最近开始使用 ASP.NET MVC，在我的测试用例中，当我调整浏览器窗口大小时，我的容器低于其他容器。我正在使用带有左侧、中间和右侧部分的站点.master 页面作为正文的一部分。css 中有一个属性来指示行为还是 HTML 元素？我已经查看了该站点主页的页面源代码并查看了 CSS，但没有任何明显的迹象表明这是如何控制的。
问问题
227 次
3 回答
3
Web 开发的一大优点是，大多数情况下，当您看到一个站点并想“他们是如何做到的”时，很容易查看代码并找出代码并对其进行测试 - 像Firebug这样的工具对于 Firefox，IE 8 (F12) 和 Chrome 中的开发人员工具都将显示格式良好的源代码和 CSS，并允许您就地修改它。
在 SO 的情况下，网站的主体包含在一个具有“容器”类的 div 中，“容器”的样式规则是：
.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”，并且基本上会重置容器上的浮动。
然而，听起来你在追求通常被称为“ CSS 的圣杯”（Rick 指出 IE7 存在一个错误，请参阅此处以获得修复），这是有充分理由的：三列，至少有一个其中灵活。
完全灵活的布局的其他示例包括：
于 2009-04-16T19:49:31.063 回答
1
它可以是浮动、位置和边距以及如何设置这些元素的组合。如果没有 URL，就很难确切地说出问题是什么或如何解决它。
作为一个起点，我建议看一下 YUI CSS Grids 或 960.gs（960 Grid System）以及漂浮在那里的各种 reset.css 文件之一。YUI 有一个很好的。reset.css 文件使您的 css 在所有浏览器中的外观和行为都相同，并且网格系统为您提供了设计网站的起点。它们还使您确信您所设计的内容在所有浏览器中的外观和行为都相同。
于 2009-04-16T19:23:22.123 回答
1
这是一个 html 布局问题。可能 asp.net mvc 布局做得不是很好。在网络上搜索“ css 列布局”有很多关于如何实现良好布局的示例。例如，参见MATTHEW LEVINE 的 In Search of the Holy Grail，对 3 列布局技术进行了很好的讨论。
于 2009-04-16T19:32:02.913 回答