为什么侧栏为显示在右下方?

在使用2栏的模板时,有时候会碰到这样一种情形:

image

一般的布局是这样的:

image

外面的父层,包含一左一右两个子层,左层设置float:left,右层设置float:right;

假设:父层为p,左层为l,右层为r,p的width:850px,l的width:600px,r的width:200px

只要两个子层的宽度加起来,小于父层的宽度,就可以正常显示了,即600+200<850。

但是,经常碰到,层会设置magin属性,那么,两个子层的宽度还要加上magin的值,小于父层的宽度,才能正常显示。

如果left设置了margin-right:30px ,右层设置了margin-left:30px,那么就要加上60px

那么在显示了l后,剩下的可供显示的宽度为:850-600-30=220px,r的margin=30,所以,r可用的宽度为190,不够r完整显示

这种情况下,r层就会下移到l层的下方,出现开头的情形。

——————–

ps:补上刚刚碰到的一种情形

侧栏没有嵌套到父层里面去

<div id=”content”>
    <div id=”contentleft”>
     </div>
</div>

<div id=’sidebar’></div>

其实应该是

<div id=”content”>
    <div id=”contentleft”>
     </div>
<div id=’sidebar’></div>
</div>

咳,可惜让我找了那么久,才发现这个问题~~

汗~~

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据