砌体 \- 柱宽百分比排水沟

Question

如果每个项目的宽度为 25% 并且装订线参数为 10 ，为什么我不能按行显示 4 个项目？请帮我！

 $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 10
});

http://codepen.io/davelins/pen/bdoRGa

原文由 Dave Lin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

改变

.grid-item {
  width: calc(25%);
}

至

.grid-item {
  width: calc(25% - 10px);
 }

原文由 Samir Das 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

上面接受的答案不是像素完美的。如果你看笔 http://codepen.io/anon/pen/aOLxwW 你会看到最右边的排水沟，这可能不是你想要的，至少不是我想要的。这是由于，item-width 计算的太小了

.grid-item {
  width: calc(25% - 10px);
}

它实际上应该是 calc(25% - 7.5px) 。它的公式是

//pseudocode to illustrate the idea. how you would do that dynamically whould be up to the language you choose (e.g. php, js...)
$number_of_cols = 3; //for example
$column_width = 100 / $number_of_cols; //a float value, e.g. 33.33333333 in this example
$item_width_diff = $gutter * ($number_of_cols - 1) / $number_of_cols; //in this example: 10*2/3 = 6.6666666

然后在你的CSS中你会有

.grid-item {
  width: calc(25% - $item_width_diff);
}

https://codepen.io/anon/pen/YjPvbL

原文由 niklas 发布，翻译遵循 CC BY-SA 4.0 许可协议