第一种方式
ht ML :
XM L/HTML Code 复制内容到剪贴板
< div &nbs p; 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:
CSS Code 复制内容到剪贴板
*{ m arg in :0 auto ; padding :0; } # box { h ei ght : 200px ; width : 200px ; border : 1px solid red ; } div div{ width :100%; height :32.855%; } span{ dis play : inline - block ; height :100%; width :32%; border : 1px solid blue ; } #box span:nth-child(2n+2){ border : 1px solid red ; mar gin -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:
XML/HTML Code 复制内容到剪贴板
< 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:
CSS Code 复制内容到剪贴板
*{ 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 ; vert ical -align : middle ; text-align : center ; }
在线预览： demo
第三种方式
利用 css3的column-count布局
html:
XML/HTML Code 复制内容到剪贴板
< div id = "box" > < div id = " First " > 人民网北京2月24日 电 (记者 刘阳)国家 发展 改革委知， </ div > < div > 人民网北京2月24日电 (记者 刘阳)国家发展改革委知， </ div > < div > 人民网北京2月24日电 (记者 刘阳)国家发展改革委知， </ div > </ div >
css
CSS Code 复制内容到剪贴板
*{ 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 Ch rom e */ column-count:3; -moz-column-rule: 4px outset #ff0000 ; /* Firefox */ -webk IT -column-rule: 4px outset #ff0000 ; /* Safari and C hr ome */ column-rule: 4px outset #ff0000 ; } #first { }
在线预览： column-count实现
但要注意的是，使用列布局时，其包含的内容本身的 宽 度必读大于等于容器宽度，在大于容器宽度时，会自行 增加列 数。
总结
以上是 为你收集整理的 不用table而实现等分DIV的方法 全部内容，希望文章能够帮你解决 不用table而实现等分DIV的方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于不用table而实现等分DIV的方法的详细内容...