Question

我试图将项目置于Masonry网格中。我已阅读并尝试了很多关于网格本身居中的相关帖子，但没有对这些项目起作用。

到目前为止我已尝试过：

添加/移除排水沟
添加/删除fitwidth选项
尝试在容器上添加margin 0 auto
尝试在容器上添加/删除宽度。

我已经创建了代表问题的代码段

＆＃13;

$(document).ready(function() {
  var $container = $(".grid");
  $container.masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 20,
    fitWidth: true,
  });
  $container.imagesLoaded(function() {
    $container.css({
      opacity: 0,
      visibility: "visible"
    }).animate({
      opacity: 1.0
    }, 300);
    //$container.show();
    $container.masonry('layout');
  });
});

＆＃13;

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  width: 1260px;
  border: solid 2px red;
}

.grid {
  max-width: 1260px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  overflow: hidden;
  padding: 0 0 2em;
  visibility: hidden;
  background: rgba(0, 255, 0, .1);
}

.grid-item,
.grid-sizer {
  display: block;
  padding: 1.5em;
  margin: 0 0 1.5em;
  background: #fff;
  width: 23%;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<body>
  <main id="content" class="content" role="main">
    <div class="wrapper">
      <section class="grid">
        <div class="grid-sizer"></div>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>
      </section>
    </div>
  </main>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js">
  </script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js">
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      var $container = $(".grid");
      $container.masonry({
        // options
        itemSelector: '.grid-item',
        columnWidth: 400,
        fitWidth: true,
      });
      $container.imagesLoaded(function() {
        $container.css({
          opacity: 0,
          visibility: "visible"
        }).animate({
          opacity: 1.0
        }, 300);
        //$container.show();
        $container.masonry('layout');
      });
    });
  </script>
</body>

＆＃13;

如您所见，在绿色部分左侧有一个小绿色空间，但最后一个和右侧之间有很多空间。我怎样才能在那里拥有相同的空间？我很确定我错过了一些显而易见的东西，但我无法找到答案。

Answer 1

我终于设法通过删除容器上的百分比宽度来实现。我已尝试使用属性browser.waitUtil(function() { return browser.getUrl() === urlToCheck; }, 5000);，但它与fitWidth不兼容，因为文档说：

fitWidth：true不适用于百分比宽度的元素大小调整。需要将columnWidth设置为固定大小，例如columnWidth：120，或者项目需要具有固定大小（以像素为单位），例如width：120px。否则，容器和项目宽度将相互折叠。

以下是工作代码的示例：

＆＃13;

percentPosition: true

＆＃13;

$(document).ready(function() {
  var $container = $(".grid");
  $container.masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 20,
    fitWidth: true,
  });
  $container.imagesLoaded(function() {
    $container.css({
      opacity: 0,
      visibility: "visible"
    }).animate({
      opacity: 1.0
    }, 300);
    //$container.show();
    $container.masonry('layout');
  });
});

＆＃13;

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  width: 1260px;
  border: solid 2px red;
}

.grid {
  /*max-width: 1260px;
  width: 100%;
  */
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  overflow: hidden;
  padding: 0 20px 2em;
  visibility: hidden;
  background: rgba(0, 255, 0, .1);
}

.grid-item,
.grid-sizer {
  display: block;
  padding: 1.5em;
  margin: 0 0 1.5em;
  background: #fff;
  width: 300px;
}

＆＃13;

砌体中心物品

1 个答案: