Question

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

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

css未能使项目居中。 here是指示我问题的小提琴的链接。

如何让黑框内的红色方块居中？

Answer 1

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

jsFiddle

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

Answer 2

使用砖石结构，并向网格中自动添加边距0。

js：

 .grid {
      margin: 0 auto;
  }

css：

bind_rows(my_list)

Answer 3

看起来您的每个方框都被分配absolute定位如下：

<div class="box" style="position: absolute; left: 0px; top: 0px;"></div>
<div class="box" style="position: absolute; left: 80px; top: 0px;"></div>
<div class="box" style="position: absolute; left: 160px; top: 0px;"></div>
<div class="box" style="position: absolute; left: 240px; top: 0px;"></div>

我开始工作的方法是将所有方框包装在另一个div容器中，并像这样操纵新容器的relative位置（或查看此fiddle ）：

var $container = $('#container');
// init
$container.isotope({
  // options
  itemSelector: '.box',
  layoutMode: 'fitRows'
});

#container {
  background-color: #333;
  width: 90%;
  height: auto;
  margin: 0 auto;
  position: relative;
}

#boxes-collection {
  position: absolute;
  left: 28%;
  width: 100%;
}

.box {
  width: 40px;
  height: 40px;
  background-color: #e74c3c;
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://squaredoodletest.t15.org/JS/isotpoe.js"></script>
<div id="container">
  <div id="boxes-collection">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

如何将同位素容器内的物品居中？

3 个答案: