任意分栏式布局 Any Order, Any Layout Columns

为了适应新项目的布局需求,总结之前搜狐博客HOME平台的经验,研究出了一种尊重HTML结构,并且可以任意调整分栏比例的分栏布局方法,不多废话看代码!

HTML:

1
2
3
4
<div class="r">
	<div class="cMain">①. 主要内容栏,以下简称“主栏”。</div>
	<div class="cSub">②. 次要内容栏,以下简称“次栏”。</div>
</div>

CSS:

为了清除分栏浮动对后面内容的影响和闭合主容器,主容器需要“clearfix”一下:

1
2
.r{zoom:1;}
.r:after{content:'\0020';display:block;clear:both;height:0;}

对于两栏按百分比对开的布局应该不需要我介绍了,主要和大家分享一下实现一栏定宽,另一栏自适应的几种基本情况:

1. 主栏居左显示,定宽200px;次栏居右显示,宽度自动补足余下空间

任意分栏布局 Any Order, Any Layout Columns

1
2
3
.r{padding-left:200px;}
	.cMain{float:left;width:200px;margin:0 0 0 -200px;}
	.cSub{float:right;width:100%;}

2. 次栏居左显示,定宽200px;主栏居右显示,宽度自动补足余下空间

任意分栏布局 Any Order, Any Layout Columns

1
2
3
.r{padding-left:200px;}
	.cMain{float:right;width:100%;}
	.cSub{float:left;width:200px;margin:0 0 0 -200px;}

3. 次栏居右显示,定宽200px;主栏居左显示,宽度自动补足余下空间

任意分栏布局 Any Order, Any Layout Columns

1
2
3
.r{padding-right:200px;}
	.cMain{float:left;width:100%;}
	.cSub{float:right;width:200px;margin:0 -200px 0 0;}

4. 主栏居右显示,定宽200px;次栏居左显示,宽度自动补足余下空间

任意分栏布局 Any Order, Any Layout Columns

1
2
3
.r{padding-right:200px;}
	.cMain{float:right;width:200px;margin:0 -200px 0 0;}
	.cSub{float:left;width:100%;}

多栏扩展

对于三分栏及更多分栏的情况,可以参考下面的结构进行扩展:

1
2
3
4
5
<div class="r">
	<div class="cMain">①主要内容栏</div>
	<div class="cSub">②次要内容栏</div>
	<div class="cExtra">③辅助内容栏</div>
</div>

更多布局示例可参考Primary Demo

样式扩展

为了让分栏支持更丰富的样式,对上面基本的HTML做了一下简单的扩展,增加两层DIV结构:

1
2
3
4
5
6
7
8
9
10
<div class="r">
	<div class="rInt">
		<div class="cMain">
			<div class="cInt">①主要内容栏</div>
		</div>
		<div class="cSub">
			<div class="cInt">②次要内容栏</div>
		</div>
	</div>
</div>

IE6 hacks

IE6下,为防止内容撑破容器引起错位,和防止浮动3像素的bug出现,对几个栏容器做一下hack:

1
2
3
.r .cMain,
.r .cExtra,
.r .cSub{_display:inline;_overflow-x:hidden;}

最终的Demo参看: Any Order, Any Layout Columns

扩展阅读: