<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>固定右栏宽度,左栏内容先出现同时自适应宽度的布局</title>
<STYLE type="text/css">
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
min-width:620px;
margin:0;
padding:0;
}
#wrapper{
float:left;
display:inline;
margin:0 30px;
background-color:#ccc;
}
#header,#footer{
clear:both;
padding:10px;
text-align:center;
}
#left{
float:left;
width:100%;
/*margin:0 0 0 -200px;*/
margin:0 -200px 0 0;
}
#innerLeft{
/*margin:0 0 0 200px;*/
margin:0 0 0 0;
background-color:#000;/*#efefef;*/
}
#right{
float:left;
width:200px;
background-color:#ddd;
}
.inner {
padding:2px 12px;
}
p{ line-height:1.6em}
</STYLE></head>
<body>
<div style="text-align:center;margin:20px">
<p></p>
</div>
<DIV id="wrapper">
<DIV id="header">
<H1>固定右栏宽度, 左栏内容先出现同时自适应宽度的布局</H1></DIV>
<DIV id="left">
<DIV id="innerLeft" class="inner">
<H2>工作原理</H2>
<P>#wrapper必须触发hasLayout,不然有时里面的内容会浮得怪怪的,我直接用float的,可以用其他方式。其实如果只是要做到这个例子要的效果连#wrapper都可以不要。<BR>#left定义100%宽度并利用margin:0
0 0 -200px把左边整块放在偏移入左边200px处,再利用#innerLeft的margin:0 0 0
200px再把内容撑出来,<BR>#right只是简单的浮动,#innerRight米多大作用,只是习惯性保留着,除了可以让我们的控制更简单点,还可以为下次改变布局可保持结构不变。</P>
<P>除了可以固定右边也可以固定左边,有空的朋友可以尝试一下</P>
<H2>存在问题</H2>
<UL>
<LI>IE7以下版本的IE浏览器无min-width,拉太小会很难看。下篇文章再解决</LI></UL>
<H2>扩展功能</H2>
<UL>
<LI>作者:<A href="http://www.aoao.org.cn/" target="_blank">aoao</A> 查找更多代码,请访问:<a href="http://www.zzsck.org/" target="_blank">站长素材库</a></LI>
<LI>还可以扩展这样的功能:<A href="http://my.opera.com/tifa/blog/show.dml/251210">最小高度100%,页脚保持在底部的布局方法</A></LI></UL>
</DIV>
</DIV>
<DIV id="right">
<DIV id="innerRight" class="inner">
<P>这只是个简单的例子,希望对初学CSS布局的朋友有帮助。</P>
<P>基本还有很多功能可以写进来,怕写得太乱了,还是等下一篇,好骗点流量。</P></DIV></DIV>
<DIV id="footer">
<P>Copyright .</P></DIV></DIV>
</body>
</html>
代码转载自:
http://www.zzsck.org/js/css/1186.html
分享到:
相关推荐
页面布局种类有很多,但万变不离其宗,归纳总结出11中布局方式。 用经典的三栏形式布局举例: 固定 - 固定 - 自适应; 固定 -自适应 - 固定 ; 固定 -自适应 - 自适应...
今天写一个供给大家参考学习,希望大家可以在这个基础上衍生一些其他的,比如三栏布局的那种:左右固定,中间自适应的效果等等 使用方法: 1、引入head部分的CSS代码 2、将body中的代码部分拷贝到你需要的地方
CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
zi-three-2.html ----6.8.6三列布局中有一列内容固定。 zi-three-3.html ----6.8.6三列布局中有一列内容固定。 zi-three-all.html ----6.8.7 三列布局中高度都不确定的情况。 源文件\04 show....
zi-three-3.html ----6.8.6三列布局中有一列内容固定。 zi-three-all.html ----6.8.7 三列布局中高度都不确定的情况。 源文件\04 show.html ----第6章中制作的一个简单页面框架。 源文件\05 ...
” 这个布局有一个缺点就是,如果我设置了foot的div,试了很多办法,都不能根据content的高度,连着中间的内容,自动置于HTML页面的底部。如有牛人知道解决方法,望留言解答。 复制代码代码如下: <!DOCTYPE ...
demo包括: 1、多个div并排,宽度自适应100% - 左右两侧div宽度固定,中间DIV占满剩余区域 ; 2、多个div,高度自适应100% - 页面布局:头,身体,脚,占满整个屏幕;
在做页面时,我们往往会碰到页面布局相关的内容,面试时也经常会被问到,那么今天我就来总结一下关于页面布局的内容。 问题:如何实现三栏布局(高度固定,左中右的结构) 假设高度已知,请写出三栏布局,其中左右...
整个页面,分为左中右三栏布局,左栏的部件库的部件(组件)作为key,拖放到中间区域时,往vuex存放数组数据,拖一个就push一个。点击某个组件时,在右栏显示其属性,其实也就是在vuex存放的数据中查找数据迭代属性。...
网站实现了网页的布局,左边固定,点击左边的链接,在右边显示相应信息,iframe自适应高度,用js更改链接样式。网站是本人在练习的时候弄的,页面简单,功能实现了。看了就明白了。 vs2005的
复制代码代码如下: <...– 禁止浏览器从本地缓存中调阅页面。–> <meta http-equiv=”pragram” content=”no-cache”> <!–网页不保存在缓存中,每次访问都刷新页面。–> <meta http-equiv=”cac
1、固定宽度CSS版式布局 2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后,下边的容器跟着浮动,造成页面错乱 当子元素浮动且未知高度时,怎么使父容器适应子...
CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示...如果网页布局宽度固定到1200px,1024分辨率用户浏览网页时浏览器下方会出现滚动条,为了解决这个问题
有时候,我们可能需要象新版的Yahoo邮箱一样,让一些数据显示块可以根据页面大小进行自适应。事实并不难,但是如果单纯用CSS控制的话,往往不能完全实现我们要的效果,这时候需要借助javascript,Javascript可以让我我们...
网页logo部分是一个中间栏 固定,左右栏自适应的结构,并在fianshlogo中插入透明fiansh、动画;导航区域 由#NAV#navbgl两个区组成,使用css中超链接属性。 5 、设计#content对象部分,#maincon为中间列,宽度固定,...
js的几个小弹框和div布局,左侧固定右边自适应的几个小例子
流动网页设计有很多好处,但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小... 在这篇文章,我们将讨论创造100%功能自适应css布局的行之有效的方法 一、使用网格的流动布局 我们大多数人都听说过设计固定宽度
项目列表 几米简介页面 列表 自定义列表 ...一列自适应布局 三列左右固定 三列自适应布局 两列居中固定布局 两列居中自适应布局 两列自适应布局 混合布局1 混合布局2 混合布局3 混合布局4 混合自适应布局
改变浏览器的宽度,你将会看到页面布局会跟着自动改变。当屏幕分辨率大于1024px时,网页宽度将会是980px。用CSS3媒体查询(Mediaquery)来检验屏幕分辨率,如果小于980px,页面宽度将会用自适应来取
圣杯布局和双飞翼布局 ...两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,中间部分在DOM结构上优先,以便先行渲染。(核心目的:先解析中间栏,展示当前页面的核心内容,提升用户体验。)