Javascript 砌体构件上50%的宽度

目前，我正在尝试使用

问题是，如果我需要前两个块的大小为总父宽度的50%，但使用此库无法做到这一点。秒元素总是低于第一个元素。不管我是否使用一些css，比如width:calc（50%-100px）。 请参见此处的示例：

//外部js:mashine.pkgd.js
$（'.grid'）。砌体({
itemSelector:“.grid项”，
columnWidth:“.grid sizer”，
位置：正确，
水平顺序：正确，
排水沟：15
});
*{框大小：边框框；}
正文{字体系列：无衬线；}
/*----网格--*/
.电网{
背景：#EEE；
最大宽度：1200px；
}
/*clearfix*/
.网格：之后{
内容：''；
显示：块；
明确：两者皆有；
}
/*----网格项----*/
.grid sizer，
.表格项目{
宽度：钙（33.33%-30px）；
}
.表格项目{
颜色：白色；
高度：120px；
浮动：左；
背景：#D26；
边框：2倍实心#333；
边框颜色：hsla（0,0%，0,0.5）；
边界半径：5px；
边缘底部：15px；
}
.grid项--高度2{高度：200px；}
.grid项--高度3{高度：260px；}
.grid项--高度4{高度：360px；}
.第40项{宽度：计算（40%-30px）；}
.item-50{宽度：计算（50%-30px）；}

砌体-流体柱宽度
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
对于您的特定示例，您需要为
.grid sizer
类考虑最低公分母（考虑分数）。（在这种情况下，您的网格看起来应该是6列，其中50%的框占3/6，常规的
。砂砾项目
框占2/6。为了安全地计算砖石网格的宽度，我也从不舍入%，因此您的
。网格尺寸器
宽度可能应为
宽度：calc（16.66%-15px）

还有一件事需要注意……如果您希望垂直和水平边沟空间是均匀的，请从公式中减去相同的像素值（而不是
33.33%-30px
尝试
33.33%-15px
。这样可以获得真正的砌体网格外观

我已经为下面的例子提供了更新的CSS。复制并粘贴到你的代码笔中，你会看到一个很大的改进

* { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer{
  width: calc(16.66% - 15px);
}
.grid-item {
  width: calc(33.33% - 15px);
}

.grid-item {
  color: white;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  margin-bottom: 15px;
}

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

.item-40 { width: calc(40% - 15px); }
.item-50 { width: calc(50% - 15px); }

让我知道这个答案是否对您有效！：）
将其标记为已接受，因为它解决了我的问题，但就我的情况而言，我最终重写了一个更简单的砌体脚本，其行为完全符合我的要求。谢谢您很高兴您将其应用到您需要的地方！：）