当前位置:首页 > DIV+CSS教程 > 正文

CSS网页布局入门教程6:左列固定,右列宽度自适应

作者:不详 来源:aa25收集 【 】 浏览: 修改日期:2009-02-17 我要评论(64)     

本站2010年9月新增《十天学会web标准(div+css)》系列教程,欢迎学习!

在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下:

#left {
    background-color: #E8F5FE;
    border: 1px solid #A9C9E2;
    float: left;
    height: 300px;
    width: 200px;
}
#right {
    background-color: #F2FDDB;
    border: 1px solid #A5CF3D;
    height: 300px;
}

这样,左栏将呈现100%的宽度,而右栏将根据浏览器窗口大小自适应。


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

二列右列宽度自适应经常在网站在用到,不仅是右列,也可以是左列,方法是一样的,只需要改变两个div的编写即可,而这种应用在目前的许多blog都能够经常看到,如pjblog中的许多网友制作的模板就是这种布局的。
制作过程这里不再详细赘述,请参考上一教程:CSS网页布局入门教程5:二列宽度自适应,只需将左列的宽度改为200px,右列的宽度和向左浮动去掉即可。如还有不明白地方您可以在评论中提问。
 

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: CSS 入门 布局 自适应

所属专题:入门教程

更多评论(64)..会员评论

speed(211.69.*.*) 发表于:2013-04-22 19:04:10
这个方法在IE6下会产生3像素的bug
defeatlr(61.164.*.*) 发表于:2013-04-20 10:35:20
老师我设置左列宽240PX 左浮动,右列宽720PX或者自适应宽,为什么右列会自动变成左浮动,而且左列会跑到右列下面去,只有设置右列float:right才会显示左右两列正常。我想问的是 什么情况下才会出现右列自动左浮动占据左列的位置
heyoh(183.47.*.*) 发表于:2012-10-24 16:56:20
这个网站太棒了,大爱!
管理员回复:谢谢,多推荐人来
xiejun(183.20.*.*) 发表于:2011-06-30 22:40:58
在right的里面定义width为auto值这样也是可以的啊
管理员回复:默认就是auto
qq375984181(119.178.*.*) 发表于:2011-01-19 12:06:50
你好,将右侧块高度设置比左侧快高的时候,就可以看出来,左侧 块的下面有 右侧的边框,字的话不知道会不会也显示进去,出现乱版
wangsuifeng(61.133.*.*) 发表于:2011-01-13 08:58:46
老师你好,我这个问题找了几个地方也不知道应该发在哪里,希望在这个地方能够得到老师的指教: <div class="sidebar1 sidebar"> <h2><span>产品</span>导购</h2> <ul> <li><span>语音业务:</span><a href="#">普通电话 | 语音数字中继</a></li> <li class="tw"><span>语音业务:</span><a href="#">普通电话 | 语音数字中继</a></li> <li class="th"><span>语音业务:</span><a href="#">普通电话 | 语音数字中继</a></li> </ul> </div> 在这个代码中div,h2,ul,li{padding:0;margin:0;},sidebar1{width:228; height:258px;} h2{height:31;} 当我设置h2的padding-left:8px;时,h2的宽度没有什么变化,可是当我设置h2{padding-left:4px;}时,h2的宽度发生了变化,致使h2的背景从高度上越界了,最后还是设置了h2{line-height:25;}才让h2和上边界有一定的距离. 还请老师指教,在这里为什么不能设置h2的padding-top,如果老师还不是很清楚我的这一个问题的话,还请老师把邮箱留下,谢谢
管理员回复:padding-left也算在总宽度里边的
faildd(123.138.*.*) 发表于:2010-12-26 00:49:08
教材简单明了,还能在线修改运行实验,太棒了。一口气看了3个小时。明天继续
管理员回复:欢迎
642256040(115.193.*.*) 发表于:2010-11-11 17:11:34
你好我就是想问下,如果想改为右列固定,左列宽度自适应,是不是也更div的定义顺序有关。我用下面的该法, #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 300px; } #right { background-color: #F2FDDB; border: 1px solid #A5CF3D; float: right; height: 300px; width: 200px; }但是这样不行,我改变div顺序以后才行。
管理员回复:应该不用改顺序的

出差旅游免费预订酒店

【视频教程】新手常见问题