为什么侧栏为显示在右下方?
在使用2栏的模板时,有时候会碰到这样一种情形:
一般的布局是这样的:
外面的父层,包含一左一右两个子层,左层设置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>
咳,可惜让我找了那么久,才发现这个问题~~
汗~~
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。