布局（二）——流体定位三列布局

接着第一篇布局（一）——流体浮动三列布局，我进一步学习了 流体定位布局，在布局一的代码基础上进行了一些修改，这里做作总结。

流体定位三列布局

代码实现

html代码

css文件代码：

//1.流体定位核心——没有float设置，而用position：absolute进行设置

//2.三列设置技巧——左右两列设置为绝对定位，中间的块采用漂移法控制与左右块的间距

// 3.注意事项：

// （1）中间三列的宽度百分比+空隙百分比=100%

//（2）中间漂移的设置采用百分比margin-left：25%；margin-right:25%; 

//     且注意中间块的width:50%;与左右漂移值相加要为100%，即25%+25%+50%

//4.一定要注意具有相联系的宽度百分值相加结果，不然当视窗变化时，布局的重合度很高，效果不好

*{

margin:0;

padding:0;

}

body{

margin:10px;

}

#header{         //注：width不设置，默认为auto——布满全浏览器

border:1px solid black;

height:60px;

line-height:60px; //上下居中——必须让行高填满整个header

background:#ccc;

margin-bottom:10px;

}

#header h1{

font-size:16px;

text-align:center;   //左右标题垂直居中

}

#nav{

border:1px solid black;

width:20%;

margin-bottom:10px;

position:absolute;  

top:82px;

}

#nav ul, #navright ul{

text-align:center;

line-height:150%;

list-style-type:none;

}

#main{

border:1px solid black;

width:50%;

margin-left:25%;   //中间漂移法

margin-right:25%;   //中间漂移法

margin-bottom:10px;

}

#main p{

padding:10px;

text-indent:36px; 

letter-spacing:2px; 

line-height:150%; 

}

#navright{

border:1px solid black;

width:20%;

margin-bottom:10px;

position:absolute;   //设置为定位，且为绝对定位，一定要设置top和left或right的值才起作用

top:82px;    

right:10px;   //设置与右边的绝对距离，若设置左边会出很多问题

}

#footer{

border:1px solid black;

height:60px;

}

#footer p{  

text-align:center;  

line-height:60px;    

}

浏览器展示效果图：