第一种方式

html:

XML/HTML Code复制内容到剪贴板 <divid="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:0auto; padding:0; } #box{ height:200px; width:200px; border:1pxsolidred; } divdiv{ width:100%; height:32.855%; } span{ display:inline-block; height:100%; width:32%; border:1pxsolidblue; } #boxspan:nth-child(2n+2){ border:1pxsolidred; margin-left:-7px; } #boxspan:nth-child(2n+3){ border:1pxsolidgreen; margin-left:-7px; }

在线预览：https://jsfiddle.net/dwqs/wrj2xvhg/2/

第二种方式

可以考虑display的table、table-row和table-cell属性

html:

XML/HTML Code复制内容到剪贴板 <divid="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:0auto; padding:0; } #box{ height:200px; width:200px; border:1pxsolidred; display:table; } divdiv{ width:100%; display:table-row; } span{ display:table-cell; border:1pxsolidblue; vertical-align:middle; text-align:center; }

在线预览：demo

第三种方式

利用css3的column-count布局

html:

XML/HTML Code复制内容到剪贴板 <divid="box"> <divid="first"> 人民网北京2月24日电(记者刘阳)国家发展改革委知， </div> <div> 人民网北京2月24日电(记者刘阳)国家发展改革委知， </div> <div> 人民网北京2月24日电(记者刘阳)国家发展改革委知， </div> </div>

css

CSS Code复制内容到剪贴板 *{ margin:0auto; padding:0; } #box{ height:200px; width:200px; border:1pxsolidred; } #box>div{ width:100%; height:32.855%; border:1pxsolidblue; -moz-column-count:3;/*Firefox*/ -webkit-column-count:3;/*SafariandChrome*/ column-count:3; -moz-column-rule:4pxoutset#ff0000;/*Firefox*/ -webkit-column-rule:4pxoutset#ff0000;/*SafariandChrome*/ column-rule:4pxoutset#ff0000; } #first{ }

在线预览：column-count实现

但要注意的是，使用列布局时，其包含的内容本身的宽度必读大于等于容器宽度，在大于容器宽度时，会自行增加列数。