命名规则:
1.通栏布局(.con-m)
2.两栏布局(.con-sXm0)
3.三栏布局(.con-sXm0eY)
命名含义如下:
1. 当单元列的宽度为 40px 的倍数时,
eY 表示 con-extra 的宽度 = Y * 40 - 10,
m0 表示 con-main 的宽度 = 总宽度 - (X + Y) * 40,
s m e 的顺序,可以按全排列排序, sXm0eY 表示各列的排列顺序。
比如:总宽为 950px 时,.con-e6m0s5 表示 con-extra(230) | con-main(510) | con-sub(190).
对应的样式为:
.con-e6m0s5 .con-main { margin: 0 200px 0 240px; }
.con-e6m0s5 .con-sub { width: 190px; margin-left: -190px; }
.con-e6m0s5 .con-extra { width: 230px; margin-left: -100%; }
2. 当单元列的宽度不为40px的倍数时, sX和eY中的X 和 Y 直接表示宽度
比如:总宽为 950px 时,.con-s120m0e50 表示 con-sub(120) | con-main(760) | con-extra(50),
对应的样式为:
.con-s120m0e50 .con-main { margin: 0 130px 0 60px; }
.con-s120m0e50 .con-sub { width: 120px; margin-left: -100%; }
.con-s120m0e50 .con-extra { width: 50px; margin-left: -50px; }
公共样式
.container{
width: 950px;
margin:0 auto;
zoom: 1;
}
.container:after,.main-wrap:after,.con-sub:after,.con-extra:after,.con-main:after{
content: "\20";
clear: both;
display: block;
}
.main-wrap{
width: 100%;
background-color:#ace;
float:left;
min-height: 1px;
}
.container,.main-wrap,.con-sub,.con-extra,.con-main{
zoom: 1;
}
.con-sub,.con-extra{
float: left;
}
.con-main{
border:1px solid red;
}
.con-sub{
width: 188px !important;
border:1px solid green;
}
.con-extra{
width: 188px !important;
border:1px solid blue;
}
/* 通栏布局 950 */
.con-m{
width: 100%;
}
/* 两栏布局 190--750 */
.con-s5m0 .con-main{
margin-left: 200px;
}
.con-s5m0 .con-sub{
width: 190px;
margin-left:-100%;
}
/* 两栏布局 750--190 */
.con-m0s5 .con-main{
margin-right: 200px;
}
.con-m0s5 .con-sub{
width: 190px;
margin-left:-190px;
}
/* 三栏布局 190--190--550 */
.con-e5s5m0 .con-main{
margin:0 0 0 400px;
}
.con-e5s5m0 .con-sub{
width: 190px;
margin-left: -750px;
}
.con-e5s5m0 .con-extra{
width: 190px;
margin-left: -100%;
}
/* 三栏布局 190--550--190 */
.con-s5m0e5 .con-main{
margin:0 200px 0 200px;
}
.con-s5m0e5 .con-sub{
width: 190px;
margin-left: -100%;
}
.con-s5m0e5 .con-extra{
width: 190px;
margin-left: -190px;
}
/* 三栏布局 550--190--190 */
.con-m0s5e5 .con-main{
margin:0 400px 0 0;
}
.con-m0s5e5 .con-sub{
width: 190px;
margin-left: -390px;
}
.con-m0s5e5 .con-extra{
width: 190px;
margin-left: -190px;
}
div布局
<div class="container con-m">
<div class="main-wrap">
main-wrap
</div>
</div>
<div class="container con-m">
<hr />
</div>
<div class="container con-s5m0">
<div class="main-wrap">
<div class="con-main">
con-main
</div>
</div>
<div class="con-sub">
con-sub
</div>
</div>
<div class="container con-m">
<hr />
</div>
<div class="container con-m0s5">
<div class="main-wrap">
<div class="con-main">
con-main
</div>
</div>
<div class="con-sub">
con-sub
</div>
</div>
<div class="container con-m">
<hr />
</div>
<div class="container con-e5s5m0">
<div class="main-wrap">
<div class="con-main">
con-main
</div>
</div>
<div class="con-sub">
con-sub
</div>
<div class="con-extra">
con-sub
</div>
</div>
<div class="container con-m">
<hr />
</div>
<div class="container con-s5m0e5">
<div class="main-wrap">
<div class="con-main">
con-main
</div>
</div>
<div class="con-sub">
con-sub
</div>
<div class="con-extra">
con-extra
</div>
</div>
<div class="container con-m">
<hr />
</div>
<div class="container con-m0s5e5">
<div class="main-wrap">
<div class="con-main">
con-main
</div>
</div>
<div class="con-sub">
con-sub
</div>
<div class="con-extra">
con-extra
</div>
</div>
预览效果