左侧固定宽度，右侧自适应宽度的CSS布局__background_left_right_width_absolute_

当前位置: 编程技术>WEB前端

左侧固定宽度，右侧自适应宽度的CSS布局

来源: 互联网发布时间：2014-10-04

本文导语: BI上有高手专门讨论了这种布局方法，但他用了较多的hack，还回避了IE6的dtd。我在实际使用中，发现回避掉IE6的dtd定义后，会导致ajax模态框无法居中（VS的一个控件，自动生成的代码，很难修改）。于是自己写了个简单的左...

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; } 

完整代码

* {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; }

左侧固定宽度200px

右侧宽度自动适应

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

CSS网页布局入门教程7：二列固定宽度居中

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

固定右栏宽度, 左栏内容先出现同时自适应宽度的布局

CSS网页布局入门教程3：一列固定宽度居中

CSS网页布局入门教程1：一列固定宽度

CSS网页布局入门教程4：二列固定宽度

本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。