CSS常见布局:左侧固定,右侧自适应 |
您所在的位置:网站首页 › css设置导航栏宽度怎么设置出来 › CSS常见布局:左侧固定,右侧自适应 |
这是一个很常见的布局,当然也可以实现右侧自适应,左侧自适应。比如常见的网页中,左侧导航栏是固定的,右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局: 固定宽度区 自适应区 后面的一个DIV,以确保前面的定位不会导致后面的变形下面讲一下常见的方法: 1、将左侧div浮动,右侧div设置margin-left。 .sidebar{ width: 300px; height: 300px; background-color: pink; float:left; } .content{ margin-left: 300px; height: 100px; background-color: blue; } .footer{ background-color: red; } .outer:after{ display: block; content:''; clear: both; visibility: hidden; } .outer{ zoom:1; }效果图如下: 大家要注意html中必须使用div标签,不要妄图使用什么p标签来达到目的。因为div有个默认属性,即如果不设置宽度,那他会自动填满他的父标签的宽度。这里的content就是例子。 当然我们不能让他填满了,填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在左边,所以我们设置content的margin-left值,值比sidebar的宽度大一点点——以便区分他们的范围。例子中是300. 假设content的默认宽度是100%,那么他设置了margin后,他的宽度就变成了100%-300,此时content发现自己的宽度可以与sidebar挤在同一行了,于是他就上来了。 而宽度100%是相对于他的父标签来的,如果我们改变了他父标签的宽度,那content的宽度也就会变——比如我们把浏览器窗口缩小,那wrap的宽度就会变小,而content的宽度也就变小——但,他的实际宽度100%-300始终是不会变的。 这个方法看起来很完美,只要我们记得清除浮动(这里我用了最简单的方法),那footer也不会错位。而且无论content和sidebar谁更长,都不会对布局造成影响. 但实际上这个方法有个限制——html中sidebar必须在content之前! 如果siderbar当到了content后面,就会出现如下的效果: 但如果sidebar在content之后,那上面的一切都会化为泡影。 可能有的人不理解,说你干嘛非要sidebar在后面呢?这个问题说来话长,反正问题就是——content必须在sidebar之前,但content宽度要自适应,怎么办?接着往下看。 2、固定区采用绝对定位,自适应区仍然设置margin。 CSS代码如下: .sidebar{ width: 300px; height: 300px; background-color: pink; position: absolute; top:0; left: 0; } .content{ height: 100px; background-color: blue; } .footer{ background-color: red; } .outer{ position: relative; }效果图: 3、标准浏览器的方法 当然,以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了:把outer设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度,那么content的宽度就变成自适应了。 对应的CSS代码 .sidebar{ width: 300px; height: 300px; background-color: pink; display:table-cell; } .content{ height: 100px; background-color: blue; display:table-cell; } .footer{ background-color: red; } .outer{ display: table; width:100%; }不过这种做法,如果sidebar写在content前面,sidebar会固定在左侧,否则固定在右侧。 HTML: sidebar固定区域 content自适应区域 后面的一个DIV,以确保前面的定位不会导致后面的变形代码很少,而且不会有额外标签。不过这是IE7都无效的方法。 ———————再说一点———————— 如果不考虑ie7及以下版本,则使用标准方法;如果不在意sidebar与content的顺序,则用第一种方法;如果不考虑对其他兄弟元素的影响,用第3种方法。 以上代码都没在IE6测试,有问题不负责解释。让IE6寿终正寝的办法就是——从此不再理他。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |