这篇文章主要介绍了css如何实现右侧固定宽度以及左侧宽度自适应,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。
这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区和终止,和终止,相信把侧边栏搞成自适应的人很少吧?
要实现这种布的局,也算比较简单。我们先给出html结构:
代码中的#包装的DIV,是用来包裹我们要定位的这两个区的;他后面还有个#页脚,用来测试在前面的定位搞定后会不会导致后面的DIV错位和终止,和终止,如果错位了,那证明我们的定位方法必须改进。
<强>下面列举几个常见的方法:
<强> 1,固定宽度区浮动,自适应区不设宽度而设置保证金
我们拿右边定宽左边自适应来做示范,CSS代码如下:
其中,侧边栏让他浮动,并设置了一个宽度;而内容没有设置宽度。
大家要注意html中必须使用div标签,不要妄图使用什么p标签来达到目的。因为div有个默认属性,即如果不设置宽度,那他会自动填满他的父标签的宽度。这里的内容就是例子。
当然我们不能让他填满了,填满了他就不能和侧边栏保持同一行了。我们给他设置一个。由于侧边栏在右边,所以我们设置内容的margin-right值,值比侧边栏的宽度大一点点和终止,和终止,以便区分他们的范围。例子中是310 .
假设内容的默认宽度是100%,那么他设置了保证金后,他的宽度就变成了100%的-310年,此内容时发现自己的宽度可以与侧边栏挤在同一行了,于是他就上来了。
而宽度100%是相对于他的父标签来的,如果我们改变了他父标签的宽度,那内容的宽度也就会变,终止,和不明,比如我们把浏览器窗口缩小,那包装的宽度就会变小,而内容的宽度也就变小,终止,和终止,但,他的实际宽度100% -310年始终是不会变的。
这个方法看起来很完美,只要我们记得清除浮动(这里我用了最简单的方法),那页脚也不会错位。而且无论内容和侧边栏谁更长,都不会对布局造成影响。
但实际上这个方法有个很老火的限制,终止,和终止,html中栏必须在内容之前!
但我需要栏在内容之后,因为我的内容里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。
但如果栏在内容之后,那上面的一切都会化为泡影。
可能有的人不理解,说你干嘛非要栏在后面呢?这个问题说来话长,反正问题就是,不明,和终止,内容必须在侧边栏之前,但内容宽度要自适应,怎么办?
下面有两个办法,不过我们先把html结构改成我们想要的样子:
<强> 2,固定宽度区使用绝对定位,自适应区照例设置保证金
我们把栏扔掉,只对内容设置,那么我们会发现内容的宽度就已经变成自适应了,不明,和终止,于是内容对栏说,我的宽度,与你无关。
内容很容易就搞定了,此时来看看侧边栏,他迫不得已抛弃了浮动。我们来看看侧边栏的特点:在右边,宽300度,他的定位对内容不影响,终止,和终止,很明显,一个绝对主义分子诞生了。
