要求：自适应宽度，左右两栏固定宽度，中间栏优先加载；
<!DOCTYPE html>
<html> <head>
<title>layout</title>
<style type="text/css">
* {
margin: 0;
padding: 0px;
} .wrap-2 {
margin-top: 20px;
} .header {
background: #E81D1D;
text-align: center;
}
/*对父元素浮动隐藏,然后三栏利用margin-bottom padding-bottom来实现等高*/ .body {
overflow: hidden;
} .main-2 {
float: left;
width: 100%;
margin-bottom: -9999px;
padding-bottom: 9999px;
background: #17A857;
} .main-wrap-2 {
padding: 0px 200px 0 200px;
}
/*margin-left是巧用来做合理的页面布局以至于不被挤到下一行*/ .sub-2 {
float: left;
margin-left: -100%;
width: 200px;
background: #CEAE13;
margin-bottom: -9999px;
padding-bottom: 9999px;
} .extra-2 {
float: left;
margin-left: -200px;
width: 200px;
background: #CEAE13;
margin-bottom: -9999px;
padding-bottom: 9999px;
} .footer {
background: #D114C0;
text-align: center;
}
</style>
</head> <body>
<div class="wrap-2">
<div class="header">Header</div>
<div class="body">
<div class="main-2">
<div class="main-wrap-2">
<p>main-wrap</p>
<p>main-wrap</p>
</div>
</div>
<div class="sub-2">
<p>sub</p>
<p>sub</p>
<p>sub</p>
</div>
<div class="extra-2">
<p>extra</p>
<p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body> </html>
三点需要理解的
一、margin-bottom: -9999px;padding-bottom: 9999px;
原理：
同列的div设置一个父级 overflow:hidden 超出部分隐藏
给同列的div设置css margin-bottom:-10000px; padding-bottom:10000px;
这样就可以实现三列等高！
二、
41 margin-left: -100%;
50 margin-left: -200px; 原理：中间列浮动并且宽度是100%，则后面的div的浮动就会被挤到下一行，当使用margin左负值，超过自身的宽度时，这个元素在第一行就有位置了。
而margin的负值达到-100%时，恰能达到窗口最左侧。 三、中间栏优先加载的意思 由于浏览器的显示方式是从上到下一行一行解析代码的，所以如果要让中间列优先加载就需要将中间列的内容写在三列当中的最前页。
就是先写中间列的div的意思。。。