本文介绍了JQuery Packery的中心容器?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用 JQuery Packery 效果很好.
我想到的问题是如何将项目容器居中放置在页面上?
The question that occurs to me is how can I center the item container on my page?
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
我尝试了CSS:
#container {
marin: 0 auto;
}
但这不起作用.
推荐答案
DeSandro已经有一个居中包装厂布局的示例.
DeSandro already has an example of a centered packery layout.
示例为此处.
基本上,它只是通过CSS居中.我也在这里复制代码:
Basically it is just centered via CSS. I'm copying the code here too:
HTML:
<h1>Packery - centered</h1>
<div class="packery js-packery" data-packery-options='{ "gutter": ".gutter-sizer", "itemSelector": ".item", "columnWidth": ".grid-sizer" }'>
<div class="gutter-sizer"></div>
<div class="grid-sizer"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.packery {
background: #FDD;
background: hsla(45, 100%, 40%, 0.2);
max-width: 480px;
margin: 0 auto;
}
/* clearfix */
.packery:after {
content: ' ';
display: block;
clear: both;
}
.gutter-sizer {
width: 2%;
}
.grid-sizer {
width: 18.4%;
}
.item {
width: 18.4%;
height: 60px;
float: left;
background: #C09;
border: 4px solid #333;
border-color: hsla(0, 0%, 0%, 0.3);
}
.item.w2 { width: 38.8%; background: #9C0; }
.item.h2 { height: 120px; background: #0C9; }
这篇关于JQuery Packery的中心容器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!