<!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. 代码质量管理工具——SonarQube

    写在前面 SonarQube(简称Sonar)是管理代码质量的开放平台,它可以快速地对代码质量进行分析,并给出合理的解决方案,提高管理效率,保证代码质量. SonarQube的流行,在于以下几点: 开 ...

  2. 调用手机在线API获取手机号码归属地信息

    手机在线(www.showji.com)始创于2001年,发展至今已拥有国内最准确.号段容量最大的手机号码归属地数据库系统, 目前号段容量将近33万条,每月保持两次以上规模数据更新,合作伙伴包括:百度 ...

  3. Qt &QSS

    Today task:解决了qt中的一些控件无法使用qss的问题(如QProgressDialog 调节chunk的颜色,QMessageBox按钮的颜色问题)1,对于QMessageBox,可以单独 ...

  4. springmvc.xml的基本配置

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...

  5. 在centos 7.0上利用yum一键安装mono

    首先我们需要先配置一下yum源中mono的引用说明: 第一步: vi /etc/yum.repos.d/mono.repo 第二步:在刚打开的文件中编辑如下内容 [mono]name=monobase ...

  6. 使用Ruby来实现批量更新AD中字段

    准备工作 安装需要用到的gem gem install net-ldap gem install roo 准备好要更新的数据,比如exel表: /root/account.xlsx,内容如下 姓名 性 ...

  7. nova instance出错："message": "Proxy error: 502 Read from server failed

    执行 $ nova resize instance1 时候出错: {, "details": " File \"/opt/stack/nova/nova/com ...

  8. ABAP 出库单打印 产品 A搭A A搭B显示方式

    *&---------------------------------------------------------------------* *& Report   *& ...

  9. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  10. Eclipse 增加php插件

    Eclipse 下载解压后运行, Help ------> Install New Software,在 Work whit 输入http://download.eclipse.org/tool ...