右侧固定宽度,左侧自适应两栏布局

前端 思享 124浏览
摘要:
最近修改了一个主题。原始主题的左侧是侧边栏,右侧是内容体。在代码中,侧栏代码放在主要内容之前。我的习惯是主要内容在左边,主要内容在前面,侧边栏在右边。于是我在网上搜了一下,找到了两种实现方式。一般来说,一种方法是使用cal()。我用的是这个,第二个是在主体内容上再加一层div,就没再尝试了。转载供大家参考。css3中的Cal()可以用来让浏览器自动计算右侧的大小。

最近在修改一个主题,原主题左侧是边栏,右侧是内容主体。而且在代码中边栏代码放在主内容之前。我的习惯更偏向于主体内容在左,并且主体内容在前,边栏在右。于是网上找了找,找到了2种实现方法。

大体讲一下吧,一种方法是用cal()实现。我就用的这一种,第二种是在主体内容上再加一层div,我就没继续试了。转载过来供大家参考学习

方法一

利用css3 中的 cal()可以实现, 让浏览器自动计算 右边的大小;

html:

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。

参考:链接

推荐阅读

css3怎么实现文字闪烁效果

如果不需要渐变闪烁效果,我们可以在关键帧动画中定义50%和50.1%的不透明度值。...

纯css实现轮播和点击切换效果(无JS)

接下来,根据需要设置ul的长度。这里,首先制作三个切换窗口,因此ul的宽度被设置为容器宽度的300%,li是每次切换时显示的子元素,宽度被设置为所显示容器的100%。所有多余的部分都被隐藏起来,这样我们就可以通过修改ul的margin-left属性的......

什么是CSS层叠,优先级规则是什么

Css本质上是一个语句规则,就是在各种条件下,我们想要产生一个特定的效果。浏览器将根据我们编写的规则决定如何呈现页面。层叠是指CSS中的一系列规则,决定了如何解决冲突,是CSS语言的基础。重要的语句会作为优先级较高的来源,所以整体优先级是从高到低的!......