三栏-中栏流动布局
用负外边距实现
实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位，
并在中栏内容区大小改变时控制右栏与布局的关系。
控制两个外包装容器的外边距，一个包围三栏，一个包围左栏和中栏。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5.2 三栏-固定宽度布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 1em helvetica, arial, sans-serif;
}
div#main_wrapper {
min-width: 600px;
max-width: 1100px;
margin: 0 auto;
background: #eee;
}
header {
padding: 5px 10px;
background: #3f7ccf;
}
div#threecolwrap {
float: left;
width: 100%;
}
div#twocolwrap {
float: left;
width: 100%;
margin-right: -210px;
}
nav {
float: left;
width: 150px;
background: #f00;
padding: 20px 0;
}
nav>* {
margin: 0 10px;
}
li {
list-style-type: none;
}
article {
width: auto;
margin-left: 150px;
margin-right: 210px;
background: #eee;
padding: 20px 0;
}
article>* {
margin: 0 20px;
}
aside {
float: left;
width: 210px;
background: #ffed53;
padding: 20px 0;
}
aside>* {
margin: 0 10px;
}
footer {
color: aliceblue;
clear: both;
width: 100%;
text-align: center;
background: #000;
}
</style>
</head>
<body>
<div id="main_wrapper">
<header>
头部
</header>
<div id="threecolwrap"><!-- 三栏外包装 -->
<div id="twocolwrap"><!-- 两栏外包装，左中栏 -->
<nav>
<!-- 无序列表 -->
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
<article>
<!-- 文本元素 -->
<h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1>
<p>
【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电，
据中央气象台官网信息，截至8月22日17时，在逐小时气温实况排行榜中，
川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜“前十”。
其中，四川合江在17时以42.2℃热到了全国第一。
而在8月21日下午，四川合江的气温也突破40℃，登顶全国高温榜第一。
</p>
<hr />
<h1>外交部回应黑神话悟空全球大热</h1>
<p>
21日，外交部发言人毛宁就“中国的国产游戏《黑神话：悟空》上线后，受到国际玩家青睐”作出回应：反映了中国文化的吸引力。
</p>
</article>
</div>
<aside>
<h1>这是一个侧边栏</h1>
<p>
今年是南开大学建校105周年。8月21日，南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元，主要用于支持南开数学研究和人才培养。
</p>
</aside>
</div>
<footer>
这是页脚
</footer>
</div>
</body>
</html>
