css实现栅格的方法
2016-02-16 17:56
609 查看
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; } } }
相关文章推荐
- 转载:html特殊字符 编码css3 content:&quot;我是特殊符号&quot;
- CSS visibility与display 属性
- 使用CSS mask实现图片斜线拼接效果
- webkit Safari的样式库
- css命名定义
- css 文本超出容器长度后自动省略的方法!
- ACE模板知识积累-CSS部分-2-color
- CSS“隐藏”元素的几种方法的对比
- CSS3 动画 思维导图
- 纯CSS实现小圆点和三角形图案
- [DevExpress]TreeList显示[+] [-] 线条样式
- css中body宽度的设定
- CSS对浏览器的兼容性常见处理方式小结
- ACE模板知识积累-CSS部分-1-.space
- LessCss
- CSS3 元素上下动
- CSS基础3——使用CSS格式化元素内容的字体
- CSS定位时margin-top与margin-bottom
- Dreamweaver 支持 scss 设置
- CSS定位属性