首页 > 代码库 > 页面小模块排列不计数目(最多一行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列),自动居中显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。