大致思路:左右两列固定宽度,采用绝对定位方式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>
相关推荐
使用css实现的三列布局,中间一列宽度固定大小,两边宽度要自适应。
CSS网页布局入门教程8:三列浮动中间列宽度自适应
div+css布局 三行三列 中间自适应
网页设计与制作教程课本实例(html+css+javascript)第二版
呵呵 很好哦 css自适应宽度的按钮!
div+css菜单导航布局自适应宽度,纯div+css
div宽度自适应布局(左边自适应)
CSS三列布局走出HTML布局阴影,两端固定宽度,中间自适应结构,下面有个不错的示例,大家可以参考下
CSS自适应宽度按钮! 很值得下载看看!资源免费,大家分享!!
下面和大家一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
插件描述:CSS3自适应手机布局. 参考示例:http://www.jq22.com/jquery-info5613
圆角按钮宽度自适应 自适应宽度的CSS圆角背景的按钮
CSS网页布局入门教程6:左列固定,右列宽度自适应
三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局。 同样的道理,更多列的布局,其实和两列、三列的...
CSS网页布局入门教程5:二列宽度自适应
3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流...
这是一个纯CSS的下拉菜单,提供给CSS爱好者学习,应用不是非常广泛,如果作为导航栏请固定高度,否则会将页面玩挤下。