2017-11-08【左中右三栏布局】

关于CSS的三无原则：无浮动，无宽度，无图片。

实现效果：左右两栏宽度固定或设置百分比，中间一栏宽度自适应。

方法1：绝对定位法-----【将左右两栏绝对定位放两边，中间使用margin属性撑开】

html,body{margin:0;height:100%;}
#left,#right{position:absolute;top:0;width:20%;height:100%;}  
#left{left:0;background-color:pink;}
#right{right: 0;background-color: pink;}
#main{margin: 0 22%;height: 100%;background-color: yellow;}

<div id="left"></div>
<div id="main"></div>
<div id="right"></div>

//左中右三个div的顺序是可以任意调整的，其它方法则不能，对顺序有限制。

1.png

方法2：margin负值法-----【三部分主体都浮动，再采用margin-left确定左右栏的位置】

html,body{margin:0;height:100%;}
#main{float:left;width:100%;height:100%;}
#main #body{margin:0 22%;height:100%;background-color: lightgreen;}
#left,#right{float:left;width:20%;height:100%;background-color:pink;}
#left{margin-left:-100%;}
#right{margin-left:-20%;}

<div id="main">
    <div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>

//不能随意改变元素顺序，主体部分放在最开始。

1.png

方法3：左右浮动法

html,body{margin:0;height:100%;}
#main{height:100%;margin:0 22%;background-color:hotpink;}
#left,#right{width:20%;height:100%;background-color:pink;}
#left{float:left;}
#right{float:right;}

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>

//不能随意改变元素顺序，主体部分放在最后。
//注意需要清除浮动

1.png

方法3：左右浮动法-----【方法3稍微改变一下】

html,body{margin:0;height:100%;}
#main{height:100%;overflow:hidden;background-color:hotpink;}
#left,#right{width:20%;height:100%;background-color:pink;}
#left{float:left;margin-right:2%}
#right{float:right;margin-left:2%}

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>

【将main设置overflow:hidden; 产生BFC，浮动对其不影响，宽度重新计算】

1.png