左侧固定宽度，右侧自适应宽度的CSS布局
更新时间：2008年09月29日 20:31:36 作者：
一边固定宽度，另一边根据浏览器窗口大小自动缩放宽度是这种很常用的布局。特别是在BS项目的界面设计中，几乎都会用到。
BI上有高手专门讨论了这种布局方法，但他用了较多的hack，还回避了IE6的dtd。我在实际使用中，发现回避掉IE6的dtd定义后，会导致ajax模态框无法居中（VS的一个控件，自动生成的代码，很难修改）。 于是自己写了个简单的左右两列的布局，没用到什么hack，很简单，只是练手用用。
css代码：left和right都贴住左侧。设置left在right上面(z-index)；在right内加个放内容的层(content)；设置content距离right的左侧为200px，即刚巧等于left的宽度。
* {margin:0; padding:0; list-style:none; }
.wrapper {width: 100%; }
.left {width:200px;background:#fcc; position:absolute; left:0 ;z-index:1 }
.right {width:100%;background:#ccc; position:absolute;left:0}
.content {margin-left:200px;background:#ffc; }
完整代码
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
css代码：left和right都贴住左侧。设置left在right上面(z-index)；在right内加个放内容的层(content)；设置content距离right的左侧为200px，即刚巧等于left的宽度。
复制代码 代码如下:
* {margin:0; padding:0; list-style:none; }
.wrapper {width: 100%; }
.left {width:200px;background:#fcc; position:absolute; left:0 ;z-index:1 }
.right {width:100%;background:#ccc; position:absolute;left:0}
.content {margin-left:200px;background:#ffc; }
完整代码
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
Pjblog模板制作教程 超强推荐...2007-02-02
css实现强制不换行/自动换行/强制换行2008-07-07
css利用A标签的背景可能作出很有意思的效果...2007-12-12
这个是form里面的name与id的区别2008-07-07
虽然CSS中的min-width、min-height、max-width、max-height属性在CSS中早有出现，不过支持此属性的浏览器使用比率都不高，比如Firefox。2008-01-01
关于filter滤镜应用于图片的两种创意...2006-12-12
又一实用的常用CSS缩写语法收集...2007-11-11
HTML下在IE浏览器中的专有条件注释讲解...2007-04-04
制作WEB在线编辑器-插入HTML标签...2007-03-03
如何实现多风格选择 样式实时切换...2007-08-08
最新评论