最近在修改一个主题,原主题左侧是边栏,右侧是内容主体。而且在代码中边栏代码放在主内容之前。我的习惯更偏向于主体内容在左,并且主体内容在前,边栏在右。于是网上找了找,找到了2种实现方法。
大体讲一下吧,一种方法是用cal()实现。我就用的这一种,第二种是在主体内容上再加一层div,我就没继续试了。转载过来供大家参考学习
方法一
利用css3 中的 cal()可以实现, 让浏览器自动计算 右边的大小;
html:
<div id="left"> 我在左边</div> <div id="right"> 我在右边</div>
css:
#left{ border:1px solid #000; width: calc(100% - 600px); float: left; } #right{ float: right; width: 500px; border:1px solid #000; }
参考链接
方法二
float与margin都用。
我打算把content的宽度设为100%,然后设置float:left,最后把他向左移动310,以便于sidebar能挤上来。
但这么一来content里面的内容也会跟着左移310,导致被遮住了,所以我们要把他重新挤出来。为了好挤,我用了一个额外的div包裹住内容,所以html结构变成了这种样子:
<div id="wrap"> <div id="content" style="height:140px;"> <div id="contentb"> content自适应区,在前面 </div> </div> <div id="sidebar" style="height:240px;">sidebar固定宽度区</div> </div>
css则变成这样:
#sidebar { width: 300px; float: right; } #content { margin-left: -310px; float: left; width: 100%; } #contentb { margin-left: 310px; }
这样一改,真正的“content”就变成了contentb,他的宽度跟以前的content一样,是100%-310.
大家可能注意到了代码中的两个margin-left,一个-310px一个310px,最后结合起来相当于什么都没干,着实蛋疼。但他确实解决了content与sidebar的顺序问题。
这个方法的缺点就是:太怪异,以及额外多了一层div。
参考:链接
转载请注明:思享SEO博客 » 右侧固定宽度,左侧自适应两栏布局