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 ...
随机推荐
- ArangoDB Foxx service 使用
备注: 项目使用的是github https://github.com/arangodb-foxx/demo-hello-foxx 1. git clone git clone https://g ...
- 编写浏览器和Node.js通用的JavaScript模块
长期以来JavaScript语言本身不提供模块化的支持, ES6中终于给出了 from, import等关键字来进行模块化的代码组织. 但CommonJS.AMD等规范已经被广为使用,如果希望你的Ja ...
- 空间的搜索与R树
在现实地图应用中,有个比较常见的问题,比如,你到了一个地方,想查查附近1km内有什么饭店. 这时地图应用就可以马上查询出周围有什么饭店,如果让你设计,你会怎么设计.假设局限在中国的地图上,共有1000 ...
- 基于Oracle的EntityFramework的WEBAPI2的实现（四）——自动生成在线帮助文档
打开我们项目中的Area文件夹,正常情况下,我们会发现已经有了一个名字叫做[HelpPage]的区域(Area),这个区域是vs帮助我们自动建立的,它是一个mvc(不是webapi),它有普通的Con ...
- jsp中取两位小数
var d=1.11111111; var c = d.toFixed(2); alert(c);
- MOSS 2013研究系列---列表的资源限制
MOSS2010 以后,对列表的条目数做了一些限制,大量的将数据存储在列表中,会降低列表的运行效能,因此,MOSS中对列表默认有了一个阀值,默认是5000条数据,当你存储的数据多余5000条的时候,用 ...
- 以图文解锁 HTTPS原理***
我们先不了聊HTTP,HTTPS,我们先从一个聊天软件说起,我们要实现A能发一个hello消息给B: 如果我们要实现这个聊天软件,本文只考虑安全性问题,要实现: A发给B的hello消息包,即使被中间 ...
- CMapStringToPtr添加与释放
// 创建MapStringToPtr CMapStringToPtr m_prjFiles; CStringList m_fileList; m_fileList.AddTail(_T(" ...
- 以Linux下的测试程序说明递归型互斥量和普通互斥量的区别
先贴代码和测试结果 // Mutex.h: 对pthread的互斥量的RAII包装 #ifndef _MUTEX_H_ #define _MUTEX_H_ #include <stdio.h&g ...
- znpc改版前后网址修改办法
znpc改版前后网址修改办法把原网址中的http://bbs.znpc.net/viewthread.php?替换为http://bbs.znpc.net/forum.php?mod=viewthre ...