这里面有一些利用 BFC 的 Trick ,能够让你更方便的控制 页面的主要内容 在一个分栏页面代码中的位置。
比如,你有一个两栏的页面,容纳主要内容的 Main Block 是自动大小的, Side Block 是固定大小的。而同时你希望让主要的内容最先进行加载(位于代码中靠前的位置)以便 SEO 。这时候就不能简单将 Side Block 放在 Main Block 之前然后使用 float 来进行排版了,而需要用到这些 Trick 。
原来以为自己已经记住了这些 Trick 的写法,经过时间的考验之后,果然还是很顺利的忘了。然后搜了下好像没有人特别分享过这个页面的内容。于是,页面在:
http://www.dynamicdrive.com/style/layouts/
总结了下,方法大致是这样:
如果你想要有一个两拦页面,首先需要一个容器
#main
,在其中定义一个占满全宽的#main-body
,然后让这个#main-body
float: left
。接着,在
#main-body
中定义一个#main-body-content
,这是你主要页面的容器。在这个容器上定义margin-right: 200px
,向右边让出一段距离给#main-body-side
。最后,再在
#main
下定义一个#main-body-side
,然后让它float: left; width: 200px
。这样能保证他有 200px 的宽度(刚#main-body-content
让出的距离),然后再margin-left: -200px
,因为#main-body
是满宽的,所以要拉回来。
代码就像:
#main { overflow: auto; }
#main-body { float: left; width: 100%; }
#main-body-content { margin-right: 200px; }
#main-side { float: left; width: 200px; margin-left: -200px; }
然后如果你改主意了,想要 Side Block 在左边怎么办?
但这个时候,只需要将#main-body-content
让出的方向换成左边,然后再将#main-side
拉到最左边就可以了。代码就像:
#main-body-content { margin-left: 200px; }
#main-side { float: left; width: 200px; margin-left: 100%; }
会分两拦之后,三拦应该也不在话下了嗯(就是让#main-body-content
同时让出两边嗯)。
// 这样的布局方式貌似前端们应该都滚瓜烂熟了吧,好像 早先 Wordpress 等的默认模板就是这样排版的。
// 勘误或者有更好的方法请跟帖告知哈。