不用table而实现等分DIV的方法

第一种方式

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>

csss:

CSS Code复制内容到剪贴板 *{ 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:

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; vertical-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 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实现
但要注意的是，使用列布局时，其包含的内容本身的宽度必读大于等于容器宽度，在大于容器宽度时，会自行增加列数。

不用table而实现等分DIV的方法