Question

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

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

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

有关如何解决此问题的任何想法？

我看过或许在做：

'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>

Answer 1

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

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

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

Answer 2

我创建了一个双柱砌体的解决方案，排水沟为30px。它仍会将其附加到两列，但在网格元素上添加similarity.sort(key=lambda x: x[1].any(), reverse=True)可以隐藏不需要的右侧排水沟。

Codepen：within a file

两个柱砌体与单排水沟

2 个答案: