CSS3页面布局-三栏-中栏流动布局
三栏-中栏流动布局
用负外边距实现
实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位，
并在中栏内容区大小改变时控制右栏与布局的关系。
控制两个外包装容器的外边距，一个包围三栏，一个包围左栏和中栏。
<!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>