1

我创建了以下 CodePen：http ://codepen.io/anon/pen/wmjHy

这个想法是有一个两列的盒子砌体，它们之间应该有 20px 的间距。我已将其设置box-sizing为border-box忽略每个项目的边框和内部填充。

然而，第二列在第一列下坍塌......大概是因为50%BOTH 框（左和右）上的 20px 添加到它。

有想法该怎么解决这个吗？

我看过也许在做：

'columnWidth': $('.masonry').width() / 2并在 CSS 中.item设置为100%，但这似乎也不起作用......也许是因为排水沟也附加到了右侧的列框？

JS：

$(document).ready(function(){

  $('.masonry').masonry({
    'itemSelector': '.item',
    'gutter': 20
    });

});

CSS：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { 

  margin: 0;
  font-family: sans-serif;
  padding: 20px;
}

.masonry {
  background: #ff0000;
}

.masonry .item {
  width:  50%;
  height: 100px;
  float: left;
  background: #eeeeee;
  border: 1px solid #333;
  margin-bottom: 20px;
}

HTML：

<div class="masonry">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
4

2 回答 2

3

如果您将以下内容添加到您的$(document).ready

  $(window).on("resize load", function() {
    var desired_width = $(".masonry").width()/2 - 10
    $('.masonry .item').css("width", desired_width)
  })

它应该给出你想要的结果。

于 2013-08-15T15:05:53.587 回答
2

我创建了一个两柱砌体的解决方案，排水沟为 30 像素。它仍然将它附加到两列，但overflow:hidden在网格元素上添加 a 可以掩盖不需要的右侧排水沟。

Codepen在这里：http ://codepen.io/natbatwat/pen/VLJjmy

于 2015-08-20T03:21:26.477 回答