为什么容器边框会弄乱 Masonry.js 项目的放置？答案

【问题标题】：Why is container border messing up Masonry.js placement of items?为什么容器边框会弄乱 Masonry.js 项目的放置？
【发布时间】：2020-01-16 12:53:31
【问题描述】：

我正在使用Desandro's Masonry Library 来获取我的瓷砖的砌体布局。

问题：我的图块偏离了几个百分点，因此它们重叠而不是居中，看起来不像它应该的那样。我将问题或至少部分问题追溯到我的container 有一个border 的10px。

有鉴于此，我的解决方案是像width: calc(100% - 25px); 那样从图块的宽度中减去该边框，同时减去container padding of 10px 和tile padding of 5px。

这阻止了瓷砖重叠，但是，仍然不是预期的结果：

--> 它们没有居中，右边有一个奇怪的间隙。

下面是我的CSS：

/*Masonry*/

.mod_catalogUniversalView.masonry_list {
    &>* {
        box-sizing: border-box;
    }
    padding: 10px;
}

.ctlg_teaser {
    opacity: 0;
    float: left;
    transition: opacity .2s;
    /* vertical gutter */
    margin-bottom: 10px;
    padding: 5px;
}


.ctlg_teaser {
    width: calc(100% - 20px);
}


@media only screen and (min-width: 400px) {

    .ctlg_teaser {
        width: calc(50% - 25px);
    }
}

@media only screen and (min-width: 800px) {

    .ctlg_teaser {
        width: calc(33.33% - 25px);
    }
}

HTML:

<div class="ctlg_teaser block<?= $this->cssClass ?>">
  <div class="ctlg_entity">
    <a href="<?= $this->masterUrl ?>"></a>
    <?php if ($this->logo): ?>
      <div class="ctlg_entity_value">
        <?= $this->logo ?>
      </div>
    <?php endif; ?>
    <?php if ($this->name): ?>
      <h3><?= $this->name ?></h3>
    <?php endif; ?>
    <?php if ($this->branch): ?>
      <p><?= $this->branch ?></p>
    <?php endif; ?>
    <?php if ($this->masterUrl): ?>
      <a class="read_more" href="<?= $this->masterUrl ?>" title="<?= $this->title ?>">Mehr Details</a>
    <?php endif; ?>
  </div>
</div>

还有JS:

    /* Tiles Masonry*/
    $(document).ready(function() {
        var grid = $('.mod_catalogUniversalView.masonry_list').imagesLoaded(function() {
            grid.masonry({
                itemSelector: '.ctlg_teaser',
                percentPosition: true
            });
            $('.ctlg_teaser').css('opacity', '1');
        });
    });

我还创建了一个CodePem 来重现问题！

非常感谢任何输入！谢谢！

【问题讨论】：

边框的用途是什么？他们在那里是为了在瓷砖之间创造一些空间吗？在这种情况下，您可以使用 here 中描述的 Masonry 中的 gutter 选项。
@volt 所有的边框，container 和 tiles，都是我必须实现的设计的一部分。我通过在tiles 上添加padding 创建了gutter。使用 'gutter' 选项也可以，但问题仍然存在。有什么东西，我不知道是什么，一直把瓷砖推到左边。我注意到，当我调整窗口大小时，最初它适合，然后向左轻轻推动瓷砖就位。
如果无法查看完整的工作示例，很难找出问题所在。请考虑创建一个有效的 sn-p 模拟您在您的网站上的情况。
@volt 这是一个 CodePen：codepen.io/pw17l008/pen/WNbgEVr
@volt 有什么想法吗？

标签： javascript jquery html css masonry

【解决方案1】：

我建议您将.masonry__list 包装在容器中，并将边框等样式从.masonry__list 移至容器。 p>

这是因为当您在.masonry__list 上应用 Masonry 时，Masonry 会尝试测量内容的高度和宽度，并注入自己的样式以保持 .masonry__list 的高度。这可能会导致您的 .masonry__list 布局消失。

在此处查看更新自您的 Codepen：

https://codepen.io/cosmiccommand/pen/LYVWKqK

.container {
    border: solid 10px red;
    position: relative;
    max-width: 1000px;
    margin: auto;
    padding: 10px;

  &, * {
    box-sizing: border-box;
  }
}

<div class="container">
    <div class="masonry__list">
        <!-- stuff -->
    </div>
</div>

【讨论】：