深入理解CSS3网格系统（grid layout）

Read tutorial on http://www.sitepoint.com/understanding-css-grid-systems

教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1297
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*------------------------------*\
    Grid System
\*------------------------------*/

.row,
.column {
    box-sizing: border-box;
}
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}
.column {
    position: relative;
    float: left;
    display: block;
}
.column + .column {
    margin-left: 1.6%;
}
.column-1 {
    width: 6.86666666667%;
}
.column-2 {
    width: 15.3333333333%;
}
.column-3 {
    width: 23.8%;
}
.column-4 {
    width: 32.2666666667%;
}
.column-5 {
    width: 40.7333333333%;
}
.column-6 {
    width: 49.2%;
}
.column-7 {
    width: 57.6666666667%;
}
.column-8 {
    width: 66.1333333333%;
}
.column-9 {
    width: 74.6%;
}
.column-10 {
    width: 83.0666666667%;
}
.column-11 {
    width: 91.5333333333%;
}
.column-12 {
    width: 100%;
    margin-left: 0;
}
@media only screen and (max-width: 550px) {
    .column-1,
    .column-2,
    .column-3,
    .column-4,
    .column-5,
    .column-6,
    .column-7,
    .column-8,
    .column-9,
    .column-10,
    .column-11,
    .column-12 {
        float: none;
        width: auto;
    }
    .column + .column {
        margin-left: 0;
    }
}
/*------------------------------*\
    Styling
\*------------------------------*/

body {
    padding: 20px;
}
.column {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #777;
    padding: 5px;
    min-height: 30px;
    text-align: center;
}
.row {
    margin-bottom: 10px;
}
.row:last-child {
    margin-bottom: 0;
}
.column .column {
    color: #eee;
    background: #333;
    border-color: #000;
}
.p {
    font-size: 14px;
    text-align: center;
    padding-top: 100px;
}
@media only screen and (max-width: 550px) {
    .row {
        margin-bottom: 0;
    }
    .column {
        margin-bottom: 10px;
    }
    .row:last-child .column:last-child {
        margin-bottom: 0;
    }
}

HTML

Read tutorial on http://www.sitepoint.com/understanding-css-grid-systems

教程

编辑器支持Emmet

快捷键

Read tutorial on http://www.sitepoint.com/understanding-css-grid-systems

教程

使用jQuery-ui和CSS3实现的浮动（float）元素效果3D演示

使用CSS clip和transition实现可扩展浮层效果（带斜向掉落动画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：