第一种方式

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:

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