自适应布局备忘

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 感谢作者

 

转载于:https://www.cnblogs.com/junwu/p/5166975.html