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

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需刷新才能执行]

赞 (0)

相关推荐

  • div+css实现自适应宽度按钮

    div+css实现自适应宽度按钮

    先来看张图片: 原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形.再通过hover标签去滑动图片.而你只需要一张图片: ok,看看代码吧. CSS: 复制代码 代码如下: *{margin:0; padding:0;}   body{padding:10px; font-size:12px;}   h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}   a{background:url(1.

  • EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码

    tabs代码如下: 复制代码 代码如下: <div id="tabs" class="easyui-tabs"> <div title="tabs1"> tabs1 </div> <div title="tabs2"> tabs2 </div> </div> 如果id="tabs"的div未设置宽度和高度,easyUI默认的宽度和高度是

  • 手机端页面rem宽度自适应脚本

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及

  • iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过

    废话不多说,贴上代码,也算是自己的一个代码存储. 复制代码 代码如下: var temp_iframe var content = document.getElementById('right'); //id为 right的DOM容器中,进行创建iframe和宽高自适应 var c = 0; function append(filename) { var the_iframe = "helpfile" + c; temp_iframe = document.createElement(

  • javascript自适应宽度的瀑布流实现思路

    javascript自适应宽度的瀑布流实现思路

    这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea. OK,现在进入正题.这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和

  • input 宽度自适应

    无标题文档 function checkLength(which) { var maxchar=100; var oTextCount = document.getElementById("char"); iCount = which.value.replace(/[^\u0000-\u00ff]/g,"aa").length; if(iCount"+ iCount+""; which.style.border = '1px dotte

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

    BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修改). 于是自己写了个简单的左右两列的布局,没用到什么hack,很简单,只是练手用用. css代码:left和right都贴住左侧.设置left在right上面(z-index):在right内加个放内容的层(content):设置content距离right的左侧为200px,即刚巧等于left的

  • CSS网页布局入门教程2：一列自适应宽度

    CSS网页布局入门教程2：一列自适应宽度

    自适应布局是网页设计中常见的布局形式,自适应的布局能够根据浏览器窗口的大小,自动改变其宽度和高度值,是一种非常灵活的布局形式,良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果.实际上div默认状态的占据整行的空间,便是宽度为100%的自适应布局的表现形式,一列自适应布局需要我们做的工作也非常简单,只需要将宽度由固定值改为百分比值的形式即可. 复制代码 代码如下: #layout {      border: 2px solid #A9C9E2;      background-co

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

    工作原理 #wrapper必须触发hasLayout,不然有时里面的内容会浮得怪怪的,我直接用float的,可以用其他方式.其实如果只是要做到这个例子要的效果连#wrapper都可以不要.#left定义100%宽度并利用margin:0 0 0 -200px把左边整块放在偏移入左边200px处,再利用#innerLeft的margin:0 0 0 200px再把内容撑出来,#right只是简单的浮动,#innerRight米多大作用,只是习惯性保留着,除了可以让我们的控制更简单点,还可以为下次改

  • 第9天:第一个CSS布局实例

    第9天:第一个CSS布局实例

    接下来开始要真正设计布局了.和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来.你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现.技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了. 注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义.但任何事情都有得有失,取舍在于你的价值判断.好

  • 第8天:CSS布局入门

    第8天:CSS布局入门

    CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2px solid;BORDER-R

  • DIV+CSS布局教程大全与pdf电子书 下载

    div+css布局入门 4XHTML下css+div布局总结. 6网页设计DIV+CSS--第1天:选择什么样的DOCTYPE. 9第一天 9什么是DOCTYPE 10我们选择什么样的DOCTYPE 10补充 10网页设计DIV+CSS--第2天:什么是名字空间 10网页设计DIV+CSS--第3天:定义语言编码 11网页设计DIV+CSS--第4天:调用样式表. 11外部调用样式表 11双表法调用样式表 12网页设计DIV+CSS--第5天:head区的其他设置. 12收藏夹小图标. 12为搜

  • CSS布局入门

    CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px; PADDING-LEFT: 20px;  PADDING-TOP: 20px; PADDING-RIGHT: 10px;  P

  • div＋css布局入门

    你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对应的什么CSS语句.当你解决了第一种问题,知道了如何结构化你的HTML,我

  • jQuery左侧大图右侧小图焦点图幻灯切换代码分享

    jQuery左侧大图右侧小图焦点图幻灯切换代码分享

    这是一款基于jQuery实现的右侧选项卡焦点图片轮播动画特效源码,每个图片的内容信息可以根据自己的喜好进行隐藏与显示,是一段超酷的焦点图轮播代码. 为大家分享的jQuery左侧大图右侧小图焦点图幻灯切换代码如下 ---------------------源码下载  效果查看----------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

随机推荐