css实现栅格的方法
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实现栅格的方法的更多相关文章
- 为IE单独写CSS的三种方法
本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
- CSS中垂直居中的方法
昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...
- HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...
- CSS模糊效果及其兼容方法
今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...
- div+css隐藏内容样式方法
div css隐藏内容样式方法 div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...
- CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)
建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...
- 奥森图标和CSS特殊字体使用方法
作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了 昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome下载后这些文件,现在的版本是4.2,Font Awesome ...
随机推荐
- python模块--hashlib
用于加密相关的操作,3.x里代替了md5模块和sha模块,主要提供SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法 import hashlib m = hashlib.m ...
- Discuz! X2.5RC 全新安装图文教程
http://www.discuz.net/thread-2660015-1-1.html 一步步教你利用Discuz X2.5建设论坛视频教程(174集) http://down.51cto.com ...
- #231-D: declaration is not visible outside of function
通常出现在.h中的函数声明,函数声明中的变量用到了.h当中没有的变量形式,比如特殊定义的结构体
- input type=number 禁止输入字符“e”的办法
输入框input,的type设置为number,本想只输入数字,但是字符“e”却能通过, 首先科普一下, <body> <input onkeypress="getCode ...
- C#软件安全 反编译 加密与安全等等
我最近开发了一些C#语言的软件,但是由于这是一种解释型语言,也就是会转化成中间件语言,很容易就被反编译解密,包括exe和dll库等等,这时候我们真的需要使用一些技巧来将自己的成果进行加密,加壳等办法. ...
- C#制作自定义安装程序
(一),安装程序 以前用vs制作过安装程序,现在把步骤写出来,有帮助的大家一定要顶哦 第一步:建立工程 1.打开vs,新建项目->其他项目类型->安装和部署(這個子项下面有安装项目和Web ...
- Log4j配置详解之log4j.xml
Log4j配置详解之log4j.xml Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息. ...
- CentOS7 系统菜单中添加快捷方式
一,在桌面新建一个文件 文件名随意,但必须带有.desktop的后缀名, 以Eclipse为例 vi /usr/share/applications/eclipse.desktop 二,在文件中写入如 ...
- java之IO整理（中）
一:打印流/*System.out.println()重定向输出*/ /*public static void main(String[] args) { System.out.println(&qu ...
- 谷歌强制厂商升级KitKat 仍无法改善安卓碎片化
据一份泄露的内部文档显示,谷歌计划推出新的Android版本及设备审批条例,限制硬件制造商推出Android 4.4 KitKat以下的旧版本硬件,来改变平台碎片化现象.如果厂商一意孤行,继续推出搭载 ...