不用table而实现等分DIV的方法
2015-08-03 18:13
567 查看
第一种方式
html:
csss:
在线预览:https://jsfiddle.net/dwqs/wrj2xvhg/2/
第二种方式
可以考虑display的table、table-row和table-cell属性
html:
css:
在线预览:demo
第三种方式
利用css3的column-count布局
html:
css
在线预览:column-count实现
但要注意的是,使用列布局时,其包含的内容本身的宽度必读大于等于容器宽度,在大于容器宽度时,会自行增加列数。
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实现
但要注意的是,使用列布局时,其包含的内容本身的宽度必读大于等于容器宽度,在大于容器宽度时,会自行增加列数。
相关文章推荐
- PHPthinking第一届DOTA比赛众筹
- HDU 1241 Oil Deposits【递归】
- 几个数据库的驱动、连接
- 2015 Multi-University Training Contest 4 hdu 5338 ZZX and Permutations
- Mockito for UT of controller
- JAVA所有的基本类及方法 复习笔记
- HDU 2642(树状数组模板二维)
- 多进程和多线程的区别
- 从一个MySQL left join优化的例子加深对查询计划的理解
- java Socket 连接 FTP
- mongobd Databus
- sap server笔记
- MC的分布式算法的实现和一些总结
- 白鹭引擎Egret入门知识补充
- vi/vim工作中常用技巧
- 友盟统计文档
- Android复习笔记(5)-数据库操作 sqllite
- swhich case 和 if else 的效率问题
- Codeb::Blocks
- UI中的协议使用步骤