标签：
1、两栏布局 侧边栏宽度固定，主内容宽度自适应
<div class="layout"> <div class="layout_aside">侧边栏宽度固定</div> <div class="layout_main">主内容栏宽度自适应</div> </div>
.layout:after{ clear: both; content: " "; display: table;} .layout_aside,.layout_main { float: left;} .layout { padding-left: 210px;} .layout_main { width: 100%; background: red;} .layout_aside { width:200px; margin-left: -210px; background: green;}
效果是:
---------------------------------------------------------------------------------------
2、两栏布局 侧边栏固定在右边 左侧为主内容
<div class="layout"> <div class="layout_main">主内容栏宽度自适应</div> <div class="layout_aside">侧边栏宽度固定</div> </div>
.layout:after{ clear: both; content: " "; display: table;} .layout { padding-right: 210px;} .layout .layout_main { width:100%; float: left; background:red;} .layout .layout_aside {margin-right: -210px; width:200px; float: right; background: green;}
效果是:
-----------------------------------------------------------------------------------------------
3、三栏布局 两个侧边栏分别固定在左右，中间为主体内容栏
<div class="layout"> <div class="layout_aside layout-aside-left">侧边栏宽度固定</div> <div class="layout_main">主内容栏宽度自适应</div> <div class="layout_aside layout-aside-right">侧边栏宽度固定</div> </div>
.layout:after{clear: both; content:" "; display: table;} .layout_aside,.layout_main {float: left;} .layout {padding: 0 210px;} .layout_main {width:100%; background: green;} .layout_aside {width:200px;} .layout-aside-left { margin-left: -210px; background: red;} .layout-aside-right {margin-right: -210px; float: right; background: blue;}
------------------------------------------------------------------------------------------------------------------------
以上内容产考http://www.cnblogs.com/lyzg/p/5160570.html#undefined 感谢作者
标签：
原文地址：http://www.cnblogs.com/junwu/p/5166975.html
