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

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {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; }

</style>
</head>
<body>
<div class="wrapper">
<div class="left">左侧固定宽度200px</div>
<div class="right">
<div class="content">
右侧宽度自动适应
</div>
</div>
</div>
</body>
</html>

左侧固定宽度，右侧自适应宽度的CSS布局的更多相关文章

  1. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  2. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  3. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  4. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  5. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  6. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

  7. div 两列布局，左侧固定宽度px，右侧自适应宽度，满屏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  9. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

随机推荐

  1. Java 并发多线程处理优秀博文整理

    多线程(11)-Fork/Join-Java并行计算框架 推荐理由:Java在JDK7之后加入了并行计算的框架Fork/Join,本文是对其讲解 分解和合并:Java 也擅长轻松的并行编程! 推荐理由 ...

  2. TransitionsTest

    CCTransitionScene* createTransition(int nIndex, float t, CCScene* s) { // fix bug #486, without setD ...

  3. 前端开发中Cookie那些事儿

    前段时间做了项目,在前端实现中频繁的操作cookie,记录几点供大家参考! cookie操作在前端开发过程中经常遇到,当然如果只是用来存储一些简单用户数据,还是比较简单的,我们要做的可能只是设置coo ...

  4. cocos2d-xV3.0rc 环境搭建

    一.下载 由于www.cocos2d-x.org很难打开,不知道是不是电信的问题,所以只好在cocoschina论坛里王哲大牛的帖子里找到了一个下载链接:http://126.am/GyU7l0 帖子 ...

  5. css3实现3d显示效果

    <!doctype html><html><head>    <meta charset="UTF-8">    <meta ...

  6. vim复制粘贴常用命令

    在Windows下我们习惯的操作,复制单个字符,复制单行多行,删除单行多行,在linux的vim中操作如下: G(shift+g+g):跳到文档尾 g+g:跳转到文档首 home键:光标移动到行首 e ...

  7. c++之五谷杂粮4---explicit

    4.1在要求隐式转换的程序上下文中,我们可以通过将构造函数声明为explicit加以阻止. 关键字explicit只对一个实参的构造函数有效.需要多个实参的构造函数不能用于执行隐式转换,所以无需将这些 ...

  8. Java面向对象编程：封装，继承，多态

    Java面向对象的三大特征: 封装:通过Java的类来实现数据和操作方法的封装,对外界可以将每一个Java类都视为一个黑箱,只需调用该黑箱提供的方法即可完成你想要的操作. 继承:通过类的继承,将统一的 ...

  9. C语言 · 字符串输入输出函数

    算法提高 3-2字符串输入输出函数   时间限制:1.0s   内存限制:512.0MB      描述 编写函数GetReal和GetString,在main函数中分别调用这两个函数.在读入一个实数 ...

  10. 原来java中也有类似goto语句的标签啊--java label标签

    http://blog.sina.com.cn/s/blog_6d5354cd0100xjg7.html ——————————————————————————————————————————————— ...