1. 方法一

1.1. 效果

2. 方法二

2.1. 效果

3. 代码

3.1. Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet/less" type="text/css" href="test.less"/>

    <script src="lib/less-1.7.1.min.js" type="text/javascript"></script>

</head>

<body>

<h2>方法一</h2>

<div class="method-01">

    <div class="row">

        <div class="cell cell-01"></div>

        <div class="cell cell-02"></div>

    </div>

    <div class="row">

        <div class="cell cell-01"></div>

        <div class="cell cell-02"></div>

    </div>

</div>

<h2>方法二</h2>

<div class="method-02">

    <div class="row">

        <div class="cell cell-01"></div>

        <div class="cell cell-02"></div>

    </div>

    <div class="row">

        <div class="cell cell-01"></div>

        <div class="cell cell-02"></div>

    </div>

</div>

</body>

</html>

　　

3.2. Less

body {

  margin: 0;

}

.row {

  background: #000;

  margin-bottom: 10px;

  .cell {

    &.cell-01 {

      width: 100px;

      height: 200px;

      background: #FF0;

    }

    &.cell-02 {

      width: 200px;

      height: 300px;

      background: #F0F

    }

  }

}

.method-01 {

  .row {

    .cell {

      display: inline-block;

      vertical-align: top;

    }

  }

}

.method-02 {

  .row {

    width: 100%;

    display: inline-block;

    .cell {

      float: left;

    }

  }

}

　　

css实现栅格的方法的更多相关文章

  1. 为IE单独写CSS的三种方法

    本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...

  2. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  3. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  4. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

  5. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  6. CSS模糊效果及其兼容方法

    今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...

  7. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  8. CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

    建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...

  9. 奥森图标和CSS特殊字体使用方法

    作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了 昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome下载后这些文件,现在的版本是4.2,Font Awesome ...

随机推荐

  1. Cache应用中的服务过载案例研究

    https://tech.meituan.com/avalanche-study.html

  2. saas 系统租户自助网站

    1. 原理       类似github 的自定义页面,使用jekyll 进行租户自助网站的生成,系统使用jenkins 进行租户的网站构建    同时结合租户的个性化域名系统,进行租户页面的发布管理 ...

  3. C#机器学习插件 ---- AForge.NET

    目录 简介 主要架构 特点 学习之旅 简介 AForge.NET是一个专门为开发者和研究者基于C#框架设计的,这个框架提供了不同的类库和关于类库的资源,还有很多应用程序例子,包括计算机视觉与人工智能, ...

  4. Protel 99 铺铜的一个坑 Pour Over Same

    Protel 99 铺铜的一个坑 Pour Over Same 好久没用 Protel 99 了,修改了一个旧的 PCB 文件. 需要修改线路,由于改了线路需要重新铺铜,得重新画铺铜的边框. 以下这个 ...

  5. bzoj 3157 && bzoj 3516 国王奇遇记——推式子

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3157 https://www.lydsy.com/JudgeOnline/problem.p ...

  6. (新)解决php版本ueditor中动态配置图片URL前缀（imageurlprefix）的方法

    昨天晚上写了一篇文章<解决ueditor中没法动态配置imageurlprefix的方法>,通过修改js获取当前域名的方法,配置imageurlprefix值: 发现还是不够灵活,因为域名 ...

  7. 启动Oracle数据库时报错ORA-00119 & ORA-00132

    今天启动Oracle数据库时报错ORA-00119 & ORA-00132,找到解决方法做个记录,方便日后查看. 若是ORACLE不提示错误的话,可以自己查看ORACLE的日志文件. Orac ...

  8. GOF23设计模式之桥接模式（bridge）

    一.桥接模式概述 桥接模式核心要点: 处理多层继承结构,处理多维度变化的场景,将各个维度设计成独立的继承结构,使各个维度可以独立的扩展在抽象层建立关联. 二.桥接模式场景提出与存在问题 商城系统中常见 ...

  9. 国内DP厂家的相关资料信息

    这两天看了国内各个厂家的DSP开发板,总结一下,希望给同样需要的人一点经验和总结. 因为我是做通信系统,所以需要TI公司的C6000系列处理器. 目前C6000系列性能最强的是C66X系列,该系列的C ...

  10. Java运算符，算术运算符

    算术运算符介绍 算术运算符用在数学表达式中,它们的作用和在数学中的作用一样. 下表列出了所有的算术运算符. 表格中的实例假设整数变量A的值为10,变量B的值为20: 操作符 描述 例子 + 加法 - ...