当浏览器调整大小时，页面上的各个部分不会重新定位的机制

在本网站中，当缩小浏览器窗口时，左侧和右侧的空白区会先消失，然后是右侧面板的缩小，随后由主容器面板。我最近开始使用ASP.NET MVC，在我的测试用例中，当我调整浏览器窗口的大小时，我的容器会降到其他容器的下面。我正在使用一个site.master页面，其左侧，中间和右侧部分作为正文的一部分。在那里有一个属性在css中规定了行为或HTML元素？我查看了本网站主页的页面源代码，并查看了CSS，但没有任何明显的迹象显示我如何控制它。当浏览器调整大小时，页面上的各个部分不会重新定位的机制

来源

2009-04-16 Rick

关于网站开发的一个优点是，大多数时候，当你看到一个网站并思考“他们是怎么做的”时，很容易查看代码并找出并测试出来 - Firefox的Firebug，IE 8（F12）的开发者工具和Chrome等工具都会显示格式良好的源代码和CSS，并且可以让您在原地进行修改。

在这样情况下，网站的主体包含在与类“容器”的DIV，为“容器”的风格规则是：

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

的关键一点我们看着这里是这个类有一个固定宽 - 950个像素，和边距设置为（扩大）：

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

设置左，右页边距为“自动”已居中的影响div容器的边缘内，并允许它们一旦容器占用了所需的950px，就可以扩展到任何需要的宽度。

里面的div容器，你再有ID为“内容”（无样式规则）一个div，然后两个div：“mainbar”和“侧栏”，其风格是：

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

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

这些离开和正确的花车是什么把酒吧放在正确的地方。

另一个方便的CSS规则是：

clear

这可以被设置为“两个”，“左”或“右”，并且将基本重置容器上的浮动。但是，听起来好像你是在经常被称作“Holy Grail of CSS”之后（里克指出IE7中存在一个错误，请参阅here for a fix），理由很充分：三列，其中至少有一列灵活。

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

来源

2009-04-16 19:49:31

我以前的文章CSS的圣杯和更新我的网站，效果不错。但是，IE7/8出现了一个问题，Gerd Riesselmann发布了一个修复程序http://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7。他的修复效果很好。 – Rick 2009-04-21 19:40:14

它可以是float，position和margin的组合，以及如何设置这些元素。如果没有URL，就很难确切地说出问题所在或者如何解决问题。

对于一个起点，我建议看一看YUI CSS Grids或960.gs（960 Grid System）以及各种各样的reset.css文件之一。 YUI有一个很好的。 reset.css文件使得你的css在所有浏览器中的外观和行为都相同，并且网格系统为你设计网站提供了一个起点。他们还让你相信，你所设计的内容在所有浏览器中的外观和行为都相同。

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

来源

2009-04-16 19:23:22

这是一个HTML布局问题。 Probaly的asp.net mvc布局不是很好。在网页上搜索'css专栏布局'有很多关于如何实现良好布局的例子。请参阅In Search of the Holy Grail by MATTHEW LEVINE以获得3列布局技术的良好讨论。

来源

2009-04-16 19:32:02 Aleris

当浏览器调整大小时，页面上的各个部分不会重新定位的机制

回答

相关问题