首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css网页格局,三列浮动中间列宽度自适应css写法

2013-03-17 
css网页布局,三列浮动中间列宽度自适应css写法。css网页布局,三列浮动中间列宽度自适应css写法。大致思路:左

css网页布局,三列浮动中间列宽度自适应css写法。

css网页布局,三列浮动中间列宽度自适应css写法。

大致思路:左右两列固定宽度,采用绝对定位方式position:absolute;

中间不写定位方式,只要分别设置padding-left以及padding-right分别为左右容器的宽度即可。

?

CSS部分:

body{margin:0; padding:0;} //此段代码是为了去除body默认的边界,这样不会影响三列的显示效果。

#left{
border:1px solid #000000;
background-color:#CCCCCC;
width:200px;
position:absolute;
left:0;
top:0;
}
#right{
border:1px solid #000000;
background-color:#CCCCCC;
width:200px;
position:absolute;
top:0;
right:0;
}
#center{
padding-left:202px;
padding-right:202px;
border:1px solid #000000;
background-color:#3333CC;
}

?

结构部分:

<div id="left">左边内容</div>
<div id="center">中间内容</div>
<div id="right">右边内容</div>

热点排行