<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>高仿栅格系统</title>

    <!--栅格系统-->

    <link rel="stylesheet" href="css/small-grid.css">

    <!---->

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

    <div class="main small-container">

        <!--一列12个-->

        <div class="small-row">

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

            <div class="col-1 have-border">A</div>

        </div>

        <div class="small-row">

            <div class="col-1 have-border">A</div>

            <div class="col-11 have-border">B</div>

        </div>

        <!--一列6个-->

        <div class="small-row">

            <div class="col-2 have-border">A</div>

            <div class="col-2 have-border">A</div>

            <div class="col-2 have-border">A</div>

            <div class="col-2 have-border">A</div>

            <div class="col-2 have-border">A</div>

            <div class="col-2 have-border">A</div>

        </div>

        <div class="small-row">

            <div class="col-2 have-border">A</div>

            <div class="col-10 have-border">B</div>

        </div>

        <!--4个-->

        <div class="small-row">

            <div class="col-3 have-border">A</div>

            <div class="col-3 have-border">A</div>

            <div class="col-3 have-border">A</div>

            <div class="col-3 have-border">A</div>

        </div>

        <div class="small-row">

            <div class="col-3 have-border">A</div>

            <div class="col-9 have-border">B</div>

        </div>

        <!--3个-->

         <div class="small-row">

            <div class="col-4 have-border">A</div>

            <div class="col-4 have-border">A</div>

            <div class="col-4 have-border">A</div>

        </div>

        <div class="small-row">

            <div class="col-4 have-border">A</div>

            <div class="col-8 have-border">B</div>

        </div>

        <div class="small-row">

            <div class="col-5 have-border">A</div>

            <div class="col-7 have-border">B</div>

        </div>

        <div class="small-row">

            <div class="col-6 have-border">A</div>

            <div class="col-6 have-border">B</div>

        </div>

    </div>

</body>

</html>

*{

    margin: 0;

    padding: 0;

    border: 0;

    list-style: none;

    box-sizing: border-box;

}

.small-container{

    width: 100%;

}

.small-container,.small-row{

    box-sizing: border-box;

}

.small-row::before,

.small-row::after{

    content: '';

    display: block;

    visibility: hidden;

    clear: both;

    zoom: 1;

}

[class*='col-']{

    float: left;

    padding: 1%;

}

.col-1{

    width: 8.33%;

}

.col-2{

    width: 16.66%;

}

.col-3{

    width: 25%;

}

.col-4{

    width: 33.33%;

}

.col-5{

    width: 41.66%;

}

.col-6{

    width: 50%;

}

.col-7{

    width: 58.33%;

}

.col-8{

    width: 66.66%;

}

.col-9{

    width: 75%;

}

.col-10{

    width: 83.33%;

}

.col-11{

    width: 91.66%;

}

.col-12{

    width: 100%;

}

　　

　　

CSS3简单的栅格系统的更多相关文章

  1. 用sass写栅格系统

    为了验证学习sass的效果,自己写了个简单的栅格系统.

  2. Bootstrap 栅格系统简单整理

    Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 总结一下我近期的学习Bootstrap的一些理解: 一.. ...

  3. bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门

    <!DOCTYPE html> <html> <head> <title>bootstrap</title> <!-- 引入boots ...

  4. css3 Grid栅格系统

    Grid 栅格系统的使用 定义容器 .coninater { display: grid; } 多种方式定义单格 1. 按百分比划分 .coninater { display: grid; grid- ...

  5. bootstrap 栅格系统 HTTP协议 软件架构 B/S C/S 常见的WEB服务器

    Day32 bootstrap Bootstrap就是响应式布局最成功的实现,为了兼容不同的浏览器采用jQuery,为了适配不同的终端采用CSS3 Media Query (媒体查询) 1.1.1 栅 ...

  6. Layui栅格系统与后台框架布局

    一.栅格布局规则: 1. 采用 layui-row 来定义行,如:<div class="layui-row"></div> 2. 采用类似 layui-c ...

  7. BootStrap栅格系统原理 笔记

    1.内容居中:效果 关键代码: <div class="container"> .........之前上面添加在body标签下的代码 </div>添加cla ...

  8. 深入理解BootStrap之栅格系统（布局）

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  9. [bootstrap] 栅格系统和布局

    1.简介 栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁.是从平面栅格系统演变而来. Bootstrap建立在12列栅格系统.布局.组件之上.以规则 ...

随机推荐

  1. jexus /Tinyfox Owin适配器

    public class Adapter { static Func<IDictionary<string, object>, Task> _owinApp; /// < ...

  2. Spring 的动态数据源实现

    1. 配置多个数据源 这里以两个c3p0数据库连接池的数据源作为实例.在Spring框架下使用c3p0的数据库需要加入c3p0-0.9.1.2.jar(现在最新的)这个支持包.这里以数据同步项目为例: ...

  3. Excel—如何解决数组求和运算时行列不匹配产生的错误

    1.如下所示: 使用SUM对两个数组A1:B2,C1:E3进行运算时,由于行列不匹配返回了错误值. 2.可通过使用IFERROR进行解决. 对判断生成的错误值,通过用0替代进行解决. 3.除以上外,由 ...

  4. javascript 获取滚动条高度+常用js页面宽度与高度

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

  5. java环境变量以及jdk、jre、jvm

    一.jdk,jre,jvm的了解:jdk全称java development kit即java开发工具包,是整个java的核心,包含了java运行环境jre.java工具包和java的基础类库: jr ...

  6. expect实现自动登录

    自动登录主机(ssh) 建脚本item2login.sh,包含如下内容 #!/usr/bin/expect set timeout 30 spawn ssh -p [lindex $argv 0] [ ...

  7. ajax跨域解决方案2

    配置文件添加: <system.webServer>       <httpProtocol>        <customHeaders>          &l ...

  8. too many open files 报错

    看到这种某个程序或sock 打开文件数超出了限制,可以在/etc/security/limits.conf 这个文件中设置某个用户的可打开文件数. 例如: root hard nofile 16384 ...

  9. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

  10. C/C++: C++位域和内存对齐问题

    1. 位域: 1. 在C中,位域可以写成这样(注:位域的数据类型一律用无符号的,纪律性). struct bitmap { unsigned a : ; unsigned b : ; unsigned ...