Trick:不用table,怎么等分DIV
2015-06-01 13:17
357 查看
在SF上,有人提出一个问题:不用table,如何把Div分成3行*3列。提供了三种思路:
csss:
在线预览:https://jsfiddle.net/dwqs/wrj2xvhg/2/
html:
css:
在线预览:demo
html:
css
在线预览:column-count实现
但要注意的是,使用列布局时,其包含的内容本身的宽度必读大于等于容器宽度,在大于容器宽度时,会自行增加列数。
原文链接:http://www.ido321.com/1562.html
ps:原文下方的评论给出第四种方式。
第一种方式
html:<div id="box"> <div> <span>1</span> <span>2</span> <span>3</span> </div> <div> <span>4</span> <span>5</span> <span>6</span> </div> <div> <span>7</span> <span>8</span> <span>9</span> </div> </div>
csss:
*{ margin:0 auto; padding:0; } #box{ height:200px; width:200px; border:1px solid red; } div div{ width:100%; height:32.855%; } span{ display:inline-block; height:100%; width:32%; border:1px solid blue; } #box span:nth-child(2n+2){ border:1px solid red; margin-left:-7px; } #box span:nth-child(2n+3){ border:1px solid green; margin-left:-7px; }
在线预览:https://jsfiddle.net/dwqs/wrj2xvhg/2/
第二种方式
可以考虑display的table、table-row和table-cell属性html:
<div id="box"> <div> <span>1</span> <span>2</span> <span>3</span> </div> <div> <span>4</span> <span>5</span> <span>6</span> </div> <div> <span>7</span> <span>8</span> <span>9</span> </div> </div>
css:
*{ margin:0 auto; padding:0; } #box{ height:200px; width:200px; border:1px solid red; display:table; } div div{ width:100%; display:table-row; } span{ display:table-cell; border:1px solid blue; vertical-align:middle; text-align:center; }
在线预览:demo
第三种方式
利用css3的column-count布局html:
<div id="box"> <div id="first"> 人民网北京2月24日电 (记者 刘阳)国家发展改革委知, </div> <div> 人民网北京2月24日电 (记者 刘阳)国家发展改革委知, </div> <div> 人民网北京2月24日电 (记者 刘阳)国家发展改革委知, </div> </div>
css
*{ margin:0 auto; padding:0; } #box{ height:200px; width:200px; border:1px solid red; } #box>div{ width:100%; height:32.855%; border:1px solid blue; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-rule:4px outset #ff0000; /* Firefox */ -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */ column-rule:4px outset #ff0000; } #first{ }
在线预览:column-count实现
但要注意的是,使用列布局时,其包含的内容本身的宽度必读大于等于容器宽度,在大于容器宽度时,会自行增加列数。
原文链接:http://www.ido321.com/1562.html
ps:原文下方的评论给出第四种方式。
相关文章推荐
- anroid开发常见编译是报错
- arduino lcd教程1:屏幕显示
- java学习------打包
- js url加密解密
- hdu 5255 魔法因子 打表 或者 乱搞 百度之星初赛第二场1004
- 36.NSFontAttributeName UITextAttributeFont
- trick:CSS 3+checkbox实现JQuery的6个基本动画效果
- 我的第一篇博客
- onInterceptTouchEvent onTouchEvent
- 第十一周 项目4 类族的设计(1)
- Aop面向切面编程
- JS对象增加元素
- Android实习周记:第四周,Geek,就要做“有技术含量”的活!
- arduino lcd教程2:屏幕秒表
- perl增量分析日志
- sql duplicate key
- XenDesktop 连接vCenter不使用 SSL 证书
- 使用IAR+Jlink开发STM32关于下载Flash的一点发现
- 传统线程机制
- ECSHOP自定义action添加