Question

我需要在gridster小部件中放置动态tile布局。我已经把砌体网格放在那里，但我希望内容居中而不是向左浮动。我发现我需要将 isFitWidth 属性更改为true并使用固定大小的 columnWidth ，但由于gridster小部件可以调整大小，因此无法正常工作。我试图在gridster resize属性中动态地使用这些属性初始化砌体，但它也不起作用。

任何想法如何使它工作？或者我应该使用不同的网格而不是砌体

HTML：

<div class="gridster">
  <ul class="ul-grid">
    <li>
      <div class="wrapper">
        <div class="grid">
          <div class="grid-item">
          </div>
          <div class="grid-item">
          </div>
          <div class="grid-item">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

CSS：

.wrapper {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.grid {
  background: #DDD;
  max-width: 1200px;
  margin: 0 auto;
}
.grid-item {
  float: left;
  width: 100px;
  height: 100px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
  margin: 3%;
}

JS：

$(document).ready(function () {
  $('.grid').masonry({
    itemSelector: '.grid-item'
  });
});

image

fiddle example

格栅内部的中心砌体内容

0 个答案: