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. 基于PCIe的高速接口设计

    基于PCIe的高速接口设计 由 judyzhong 于 星期四, 03/03/2016 - 13:49 发表 作者:李晓宁,姚远程,秦明伟 2016年微型机与应用第1期 摘要:PCIe总线是第三代I/ ...

  2. 关于modelsim时序仿真的几篇文章

    1.http://wenku.baidu.com/view/386597f37c1cfad6195fa797.html 2.http://wenku.baidu.com/view/4b9521f9f7 ...

  3. Swift语言 简明基础 代码演示样例

    开发环境: Mac.Xcode6.0 下面内容均可创建ios common line项目来測试 1.Hello World演示样例 使用xcode创建新的common line项目,查看主文件main ...

  4. Can you share some Scala List class examples?

    Scala List FAQ: Can you share some Scala List class examples? The Scala List class may be the most c ...

  5. vue的数组如何存储数据

    vue 和 angular 还有有些区别的, 比如,vue中的数组数据改变后,view并没有发生改变,angular就不会这样. 所以VUE 在数组扩展方法中提供以了一个新的API arr.$set( ...

  6. c++之拷贝构造函数调用时机

    test1: #include<iostream> using namespace std; class Copy_construction { public: Copy_construc ...

  7. kafka的分区模式？

    当别人问这个问题的时候,别人肯定是想你是否看过源码.是否针对不同场景改过kafka的分区模式 这是别人最想知道的是,你的message如何负载均衡的发送给topic的partition 我们用kafk ...

  8. 设计和开发ETL系统（一）——ETL过程综述

    在这部分将按照设计和实现ETL系统的流程展开,将上一个部分的那些子系统按照提取数据.清洗和一致化.向呈现服务器提交以及管理ETL环境等四个方面进行了分类.(是不是说对ETL主要就是掌握这四个方面的内容 ...

  9. 利用JDK动态代理机制实现简单拦截器

    利用JDK动态代理机制实现简单的多层拦截器 首先JDK动态代理是基于接口实现的,所以我们先定义一个接口 public interface Executer { public Object execut ...

  10. openwrt内核配置选项添加

    摘自:http://blog.csdn.net/weiniliuchao/article/details/50295527 增加内核配置选项 openwrt的.config文件中,关于内核的选项都是形 ...