如何将物品置于同位素容器内部？ [英] How to center items inside isotope container?

问题描述

我有一个非固定宽度的同位素网格，我不知道如何将物体置于同位素容器内。

  .box {
 width：40px; 
 height：40px; 
背景颜色：＃e74c3c; 
 margin：0 auto; 
} 
  

css无法居中放置这些项目。 此处是指出我的问题的小提琴的链接。

解决方案

最简单的方法是使用砌体：

p>

jsFiddle

  var $ container = $（'＃container'）; 
 // init 
 $ container.isotope（{
 // options 
 itemSelector：'.box'，
 masonry：{
 columnWidth：40， 
 isFitWidth：true 
} 
}）; 
  

I have an isotope grid with a non fixed width and I dont know how to center the items inside the isotope container.

.box{
width: 40px;
height: 40px;
background-color: #e74c3c;
margin: 0 auto;
}

that css fails to center the items. here is the link to the fiddle that illustrates my problem.

How can i make the red squares center inside the black box?

解决方案

Easiest way is to use masonry:

jsFiddle

var $container = $('#container');
// init
$container.isotope({
// options
itemSelector: '.box',
masonry: {
columnWidth: 40,
isFitWidth: true
}
});

这篇关于如何将物品置于同位素容器内部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！