页面小模块排列不计数目（最多一行3列），自动居中显示

Posted 2020-09-18 Heidi*Liu

今天做了一个项目中，要求页面的小模块居中显示，并且最多一行显示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);}