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. paip.分布式应用系统java c#.net php的建设方案

    paip.分布式应用系统java c#.net php的建设方案 1. 基础设施的建立 1 2. 本地的的调用API 1 3. 数据的传输 1 4. 代码的传输 1 5. 代码的自动热编译 2 6.  ...

  2. OS memory

    https://blogs.technet.microsoft.com/askperf/2013/05/03/finally-a-windows-task-manager-performance-ta ...

  3. seajs加载jquery插件

    假设有如下一个名为get-data的jq插件: (function($) { $.fn.getData= function() { console.log($(this).attr('data')) ...

  4. config对象

    在js中经常定义一个config对象来保存当前对象里面的一些临时变量:定义这个变量可以被对象中所有的属性访问到,可以避免重复,减少内存占用,统一管理: 如: <script> functi ...

  5. LeetCode: Rotate Image 解题报告

    Rotate ImageYou are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees ( ...

  6. java有序的hashmap

    使用LinkedHashmap可以构建一个有序的map 引用:http://wiki.jikexueyuan.com/project/java-collection/linkedhashmap.htm ...

  7. jquery实现的个人中心导航菜单

    之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 在线预览   源 ...

  8. 3DS更新R4烧录卡内核

    机子是N3DSLL,用的R4烧录卡是银卡HK版. 关于R4烧录卡的基础知识科普贴: https://tieba.baidu.com/p/4855297365 为了防止该网页挂掉还是存图吧. 找最新内核 ...

  9. DVI与DVI-D的区别

    DVI-I兼容DVI-D和VGA,如果不使用VGA信号兼容,那么没有任何区别. 1) DVI接口是1999年由数字显示工作组DDWG(Digital Display Working Group)推出的 ...

  10. shell中执行hive命令错误:delimited by end-of-file (wanted `EOF')

    错误信息: warning: here-document at line 58 delimited by end-of-file (wanted `EOF') 业务场景,使用hive对数据进行批量清洗 ...