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. angular学习笔记(十一)-表达式

    本篇只要介绍angular表达式: 在之前的例子中,我们多半是直接把数据作为angular标识符的值,但其实可以使用表达式来做更多的事情: 比如: {{number}} 也可以是: {{number+ ...

  2. py自动化之环境配置

    1,官网下载py,点击安装,配置环境变量 2,下载setuptools,用于安装pip (python setup.py install) 3,下载pip,用于安装selenium(pip insta ...

  3. ubuntu 12.04下gedit查看txt中文乱码解决办法

    http://blog.sina.com.cn/s/blog_6273990801013dwv.html 由于我不能要求别人保存txt文件时必须用utf-8,那我只能自己找解决办法: 打开终端输入: ...

  4. Python以不可见字符作为列分割符

    # -*- coding: utf-8 -*- import sys import time CTRL_A='\x01' CTRL_B='\x02' thedate = '' thetime = '' ...

  5. 手动挡C1驾驶学车@长建驾校

    2015-11-01 下午取钱去长建驾校报名学车 4600(学费) + 100(暂住证) + 30(照片) + 10(体检) 2015-11-14 8:00-12:00 理论课2 光盘10  2015 ...

  6. 【JavaFx】客户端服务器C/S架构搭建

    客户端获取服务器端软件更新版本方法: package com.platform.ui.update; import java.io.BufferedInputStream; import java.i ...

  7. vim复制粘贴常用命令

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

  8. 基于html5整屏切换IDO智能手表页面滚动代码

    之前为大大家介绍了一款jquery实现的整屏切换特效.今天分享一款IDO智能手表页面滚动html5代码.这是一款基于jQuery+HTML5实现的页面滚动效果代码.效果图如下: 在线预览   源码下载 ...

  9. C语言 · 递归求二进制表示位数

    算法训练 6-2递归求二进制表示位数   时间限制:10.0s   内存限制:256.0MB      问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数 ...

  10. git中文乱码解决方案

    解决方案: 在bash提示符下输入: git config --global core.quotepath false core.quotepath设为false的话,就不会对0x80以上的字符进行q ...