均匀列布局的一种方案

身在一家电商公司上班，经常做一些页面展示商品。通常 会显示一堆的商品，有时是五列，有时是4列。还稍微好一点的就是基本上80%的布局，都是均匀列，

下面先给实现的几种方式:

第一种：text-align: justify;+类伪类 ：after实现

1 2 3 4 5 6 7 8 9

< div  class="conbox">      < div  class="list">          < span >1</ span >          < span >2</ span >          < span >3</ span >          < span >4</ span >          < span >5</ span >      </ div > </ div >

                        

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.conbox{ position:relative; width:1200px; } . list {    text-align :  justify ; } . list span {    width : 300px ;   height:380px;    line-height : 24px ;    display :inline- block ;    text-align : center ; }   .list:after {   position: relative;    content :  "" ;    display : inline- block ;    width :  100% ; } 这种实现方式，关键点在于text-align: justify;和 after往页面添加空内