Column布局参考 – 圣杯

二话不说先上图，兴许你会很熟悉：

优缺点就不说了，看下代码部分：

HTML部分

<div id="content">
 
    <div class="block col-m-s300-e100">
 
        <div class="main-wrap">
            <div class="main">main</div>
        </div>
 
        <div class="sub">sub</div>
 
        <div class="extra">extra</div>
 
    </div>
 
    <div class="block col-s350-m-e200">
 
        <div class="main-wrap">
            <div class="main">main</div>
        </div>
 
        <div class="sub">sub</div>
 
        <div class="extra">extra</div>
 
    </div>
 
    <div class="block col-m-s300">
 
        <div class="main-wrap">
            <div class="main">main</div>
        </div>
 
        <div class="sub">sub</div>
 
    </div>
 
</div>

CSS部分

.main-wrap, .sub, .extra { float:left;}
.main-wrap { width:100%;}
.main { background-color:#eef;}
.sub { background-color:#fee; }
.extra { background-color:#efe;}
 
.block { border-bottom:20px dashed #6C0; width:100%; }
.block > div, .block > div .main { height:200px;}
 
/*  Clearfix
----------------------------------------*/
.block:after, .block .main:after, .block .sub:after, .block .extra:after {
	clear:both;
	content: '20';
	display:block;
	height:0;
}
.block, .block .main, .block .sub, .block .extra {
	zoom:1;	/* ie6 */
}
 
/*  The First Block
--------------------------------------- */
 
.col-m-s300-e100 .main {
	margin:0 400px 0 0;
}
 
.col-m-s300-e100 .sub {
	margin-left:-400px;
	width:300px;
}
 
.col-m-s300-e100 .extra {
	margin-left:-100px;
	width:100px;
}
 
/*  The Second  Block
--------------------------------------- */
 
.col-s350-m-e200 .main {
	margin:0 200px 0 350px;
}
 
.col-s350-m-e200 .sub {
	margin-left:-100%;
	width:350px;
}
 
.col-s350-m-e200 .extra {
	margin-left:-200px;
	width:200px;
}
 
/*  The Third  Block
--------------------------------------- */
.col-m-s300 {}
.col-m-s300 .main {
	margin:0 300px 0 0;
}
.col-m-s300 .sub {
	margin-left:-300px;
	width:300px;
}

这里分享自己常用的一种分栏方式之一，之前整理过淘宝栅栏布局模块化命名浅析，当时并不晓得圣杯布局，有幸看到lifesinger的渐进增强式布局探讨（下），受益匪浅。

先看看之前的这个图
class="grid-c3-s5e7"
上面这个class中的 3 5 7分别指的是三列布局在24栏栅格化分别占到的栏数。

但事实是并不是所有站点都适合或使用了栅格化布局，尤其是在多项目快速开发的过程中，人少活多，面对着大量的页面，应该没有太多人那么高效率的，配合设计师实施栅格化设计布局。

但是这种负margin值，页面内容部分主次顺序分明（main、sub、extra），兼容性好(IE6 zoom:1; 清除浮动，clearfix)，任意列可高出等优点。

我们给到它，固定列宽的具体数值，就可以摆脱删栏的束缚，随意使用了（即便是高压下给到设计稿精度不高），我们用这样的命名来应对：

col-m-s300-e100
main列100%;
sub子列300px；
extra附加列100px;
//实际上m的宽度一般是通过 content 这个div的宽度来限定的

col-m-s-e
我们通过m s e的从左至右的出现次序来确定网页中3列的显示位置，这点从文章开始的图和对应的代码中可以看出。

演示地址：http://uecss.com/demo/jeff/msbox/column.html

18 thoughts on “Column布局参考 – 圣杯”

UECSS.COM

Column布局参考 – 圣杯

18 thoughts on “Column布局参考 – 圣杯”

Leave a comment