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