使用 masonry.js 破坏布局，但在添加 Foundation 5 时有效

Question

目标
拥有一个正常运行的“pinterest 风格”布局。

背景
我之前用 Masonry 创建了一个博客概念，布局非常流畅。为了展示它应该如何工作，我发布了This video on youtube

我有我的 original conceptual demo on codepen，它使用了 Foundation 5。

然后我分叉了这个broken demo in question - on codepen。

但是如果我删除 Foundation 5 它将不起作用。但这真的很奇怪，因为 HTML 中的任何地方都没有基础类。

问题
这根本不应该依赖 Foundation 5。当我删除外部 Foundation 5 文件时，容器会浮动到任一侧。

即使浏览器窗口可容纳更多内容，布局也会变为每列单个项目。

当前状态

它可以工作，但不应依赖于 Foundation。

代码

HTML

<div id="gallery-content" class="clearfix">

  <!-- Case 1 -->  
    <div class="case-box item">
      <img src="http://ships.bouwman.com/Planes/Boeing---X-48B.jpg" />
      <div class="case-country country-us"></div>

      <div class="case-description">
        <p>Boeing Blended Wing X-48B</p>
      </div>

      <div class="case-options">
        <a href="#">Details<i class="fa fa-arrows-alt"></i></a>
      </div>
    </div> 

    <!-- many more containers then closed off by #gallery-content div -->

CSS

Foundation 5 的 CSS 来自 CDNJS。

//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css

还有我写的这段代码

#gallery-content {
  width: auto;
  margin: 0 auto;
}

.item {
  display: block;
  float: left;
  width: 300px;
  margin: 0 20px 20px 0;
  -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}

.item img { width: 300px; height: auto; }

.case-box {
  border: #888 1px solid;
  padding-bottom: 72px;
  position: relative;
}

.case-box {
  -webkit-border-top-left-radius: 2px;
  -webkit-border-top-right-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JavaScript

jQuery

来自 CDNJS 的砌体

//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.min.js

还有这段代码

$(document).ready(function() {

  // Initialize Masonry
  $('#gallery-content').masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
  }).imagesLoaded(function() {
      $(this).masonry('reload');
    });
  }); 

直播链接：
http://codepen.io/JGallardo/pen/BuCbn.

Answer 1

使您的演示按预期工作的特定 Foundation CSS 是：

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

如果没有此规则，您的项目会宽 2 个像素，因为它们的边界包含在盒子模型计算中，我希望这会破坏布局。

这是你的笔叉，去掉了 Foundation：http://codepen.io/anon/pen/nkmgJ

Answer 2

我接受了乔纳森的回答，因为他在技术上按照我最初提出问题的方式回答了这个问题。

然而，这里真正的问题既不是 MasonryJS，也不是 Foundation 提供真正的解决方案。 foundation.css 提供补救措施的原因是因为border: #888 1px solid; 需要重置框大小。

在 Paul Irish 的一篇文章中，他讨论了如何用

解决这个问题

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

完整帖子可在：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

当然，低于 9 的 Internet Explorer 版本存在问题。您可以在 box-sizing: border-box => for IE8? 阅读更多相关信息

Chris Coyer 在http://css-tricks.com/box-sizing/ 上更深入地讨论了盒子尺寸。

但是在不依赖此重置的情况下保持兼容性的最简单解决方法是只使用轮廓而不是边框​​。您可以在Difference between outline and border 阅读更多相关信息。

因此，在我自己的项目中，我添加了该重置。我还确保从

更改我的代码

.case-box {
  border: #888 1px solid;
  padding-bottom: 72px;
  position: relative;
}

到

.case-box {
  outline: #888 1px solid;
  padding-bottom: 72px;
  position: relative;
}