首页 > 代码库 > 页面小模块排列不计数目(最多一行3列),自动居中显示

页面小模块排列不计数目(最多一行3列),自动居中显示

今天做了一个项目中,要求页面的小模块居中显示,并且最多一行显示3列。这里我研究出了一种做法,不管小模块的数目为1或者2或者3.都可以居中显示。

html部分

<div class=‘content‘>

    <div class=‘content-inner‘>

         <div class=‘item‘></div>

         <div class=‘item‘></div>

         <div class=‘item‘></div>

    </div>

</div>

css部分

.content{width:1200px;margin:0 auto;text-align:center;overflow:hidden;}
.content-inner{margin-right:-146px;display:inline-block;zoom:1;*display:inline;}
.content .item{width:300px;height:400px;margin:0 146px 45px 0;float:left;background:#fff;border:1px solid #E0E6ED;box-shadow:0 0 60px rgba(13,37,62,.1);}

页面小模块排列不计数目(最多一行3列),自动居中显示