jquery - 带单天沟的两柱砌体

Question

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

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

然而，第二列在第一列下方折叠...大概是因为 50% 和两个框(左侧和右侧)上的 20px 添加到它。

关于如何解决这个问题有什么想法吗？

我考虑过可能做的事情:

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

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>

Answer 1

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

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

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