三栏-中栏流动布局

第一种：用负外边距实现

html代码

<div id="main_wrapper">
  <div id="threecolwrap"> /*三栏外包装(包围全部三栏)*/
    <div id="twocolwrap"> /*两栏外包装(包围左栏和中栏)*/
    <nav>Nav</nav>
    <article>Article</article>
  </div> /*结束两栏外包装(twocolwrap)*/
  <aside>Asides</aside> /*结束三栏外包装(threecolwrap)*/
 </div>
</div>

css代码

#main_wrapper{min-width: 600px;max-width: 1100px;margin: 0 auto}
header{padding: 10px;background-color: #a5a5a5}
#threecolwrap{float: left;width: 100%}
#twocolwrap{float: left;width: 100%;margin-right: -210px} /*把右栏拉到区块外边距腾出的位置上*/
nav{float: left;width: 150px;background-color: #f00;padding: 20px 0}
nav>*{margin: 0 10px} /*让子元素与栏边界保持一定距离*/
article{width: auto;margin-left: 150px;margin-right: 210px;/*在流动居中的栏右侧腾出空间*/background-color: #eee;padding: 20px 0}
article>*{margin: 0 20px} /*让子元素与栏边界保持一定距离*/
aside{float: left;width: 210px;background-color: #ffed53;padding: 20px 0}
aside>*{margin: 0 10px} /*让子元素与栏边界保持一定距离*/

第二种

html代码

<nav>Nav content</nav>
<article>Article content</article>
<aside>Asides content</aside>

css代码

nav{display: table-cell; width: 250px;padding: 10px;background-color: #dcd9c0}
article{display: table-cell;padding: 10px 20px;background-color: #ffed53}
aside{display: table-cell;width: 210px;padding: 10px;background-color: #3f7ccf}