jquery - 单槽两列砌体

我创建了以下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>

最佳答案

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

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

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

关于jquery - 单槽两列砌体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18255438/