【原创】实现一个好用的网页布局系统（栅格、流式）
CSS 2 大行其道的年代，CSS + Div 布局法一直是 Web 前端开发的核心与重难点之一，让很多初学者、后端程序猿生畏、头疼；而当 CSS 3 开始逐渐流行后，HTML 5 / CSS 开发框架又如雨后春笋，令人眼花缭乱。于是，很多人会觉得 <font color="red" size="3">网页布局</font> 是个高深、蛋疼的活儿~
救世主 BootStrap
用过 Web 前端框架的人想必都对大名鼎鼎的 Twitter BootStrap 有所了解，它不但逻辑行为方面完全基于 jQuery，在网页布局方面也像 jQuery 一样，用简洁的 API（HTML 结构、CSS 类）在较短时间内就能搭建出 Modern & Responsive View，方便初学者上手~
很多人一见“框架”二字，就会觉得很牛逼，高不可攀，特别是这些前端框架的 CSS 还都是 Less、Sass 等高级样式语言编译出来的一大坨紧凑代码。所以，要么就乖乖地用框架，平时盼更新，没了就不会写；要么就自己草草地手敲，一个项目一套写法，永远没个章法~
凡人修仙
其实在科研、工程领域，“大道至简”的道理永不过时，再复杂的理论、技术，其核心原理都是很简练的，然后再由其基本元素按照基本规则随机组合，以致千变万化~
我把我手写纯 HTML/CSS 提炼出的一个框架 <font color="red" size="3">EasyLayout.css (v1.0)</font> 中的布局系统 提出来与大家分享我的自适应网页布局的心得 —— 结合 <div /> 简洁的书写结构与 <table /> 完善的长宽、居中算法，轻松达成 ——
- 行列式栅格布局：列格宽度自适应、列格自动等高、列格子元素垂直居中
- 单位内容框流式布局：行列数、总行数自适应屏幕宽度（自动换行），且所有内容框可水平居中
* {
box-sizing: border-box;
}
/* ----- Toolkit ----- */
.ClearFix:after, body:after,
ul:after, form:after, div:after,
header:after, footer:after, nav:after,
article:after, section:after, aside:after {
content: " ";
font-size: 0;
line-height: 0;
height: 0;
width: 0;
visibility: hidden;
display: block;
clear: both;
zoom: 1;
}
.CenterX {
text-align: center;
}
.CenterY {
display: table;
}
.CenterY > * {
float: none;
display: table-cell;
vertical-align: middle;
}
.Ellipsis,
.Ellipsis a, .Ellipsis span,
.Ellipsis li, .Ellipsis td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.Float-L { float: left; }
.Float-R { float: right; }
.Fix-Top {
position: fixed;
z-index: 2147483647;
}
/* ----- Grid Layout ----- */
.Grid-Row {
display: table;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.Grid-Column {
display: table-cell;
/* Patch for iframe child-element */
vertical-align: top;
}
.Grid-Column.CenterY {
float: none;
vertical-align: middle;
}
.Column-1_1 {
width: 100%;
text-align: left !important;
}
.Column-1_2 {
width: 50%;
}
.Column-1_3 {
width: 33.3%;
}
.Column-2_3 {
width: 66.6%;
}
.Column-1_4 {
width: 25%;
}
.Column-3_4 {
width: 75%;
}
.Column-1_5 {
width: 20%;
}
.Column-4_5 {
width: 80%;
}
.Column-2_5 {
width: 40%;
}
.Column-3_5 {
width: 60%;
}
.Column-1_6 {
width: 16.6%;
}
.Column-5_6 {
width: 83.3%;
}
.Column-1_7 {
width: 14.2%;
}
.Column-6_7 {
width: 85.7%;
}
.Column-3_7 {
width: 42.8%;
}
.Column-4_7 {
width: 57.1%;
}
.Column-4_9 {
width: 44.4%;
}
.Column-3_10 {
width: 30%;
}
.Column-11_20 {
width: 55%;
}
/* ----- Item Box ----- */
.Item-Box {
display: inline-block;
margin: 0 1% 0.5em;
text-align: left;
background: white;
border: 1px solid rgb(215, 215, 215);
box-shadow: 1px 2px 3px rgb(200, 200, 200);
transition: border-color ease-in-out .15s,
box-shadow ease-in-out .15s;
}
.Item-Box:hover {
border-color: rgb(14, 144, 210);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px rgba(14, 144, 210, 0.6);
}
上述代码的核心在于 ——
- 栅格布局：
display: table(-cell)与vertical-align: middle - 流式布局：
display: inline-block与text-align: center
是不是有些“返璞归真”的感觉？在保留 块级元素 可指定长宽、内外边距、定位坐标的同时，重新拾起 行内元素 自动换行/原生水平居中、表格单元格 自动等高/自调宽度/原生垂直居中的优秀特性~
示例代码
<body>
<header class="Grid-Row">
<div class="Grid-Column Column-1_6">
......
</div>
<div class="Grid-Column Column-5_6 CenterY">
......
</div>
</header>
<div id="Main" class="Grid-Row">
<div class="Grid-Column Column-1_6">
......
</div>
<div class="Grid-Column Column-5_6">
<div class="Grid-Row CenterX">
<div class="Item-Box">
<div class="Grid-Column Column-1_6">
......
</div>
<div class="Grid-Column Column-1_2 CenterY">
......
</div>
<div class="Grid-Column Column-1_3 CenterY">
......
</div>
<div class="Item-Box">
<div class="Grid-Column Column-1_6">
......
</div>
<div class="Grid-Column Column-1_2 CenterY">
......
</div>
<div class="Grid-Column Column-1_3 CenterY">
......
</div>
<div class="Item-Box">
<div class="Grid-Column Column-1_6">
......
</div>
<div class="Grid-Column Column-1_2 CenterY">
......
</div>
<div class="Grid-Column Column-1_3 CenterY">
......
</div>
<div class="Item-Box">
<div class="Grid-Column Column-1_6">
......
</div>
<div class="Grid-Column Column-1_2 CenterY">
......
</div>
<div class="Grid-Column Column-1_3 CenterY">
......
</div>
</div>
</div>
</div>
</body>