砌体 - 列宽百分比 + 排水沟

Question

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

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

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

Answer 1

改变

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

到

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

Answer 2

只需规范化 css，然后再将您自己的 css 添加到 HTML 元素。它会起作用的。它从继承的 css.

向 div 添加边距

Answer 3

上面接受的答案不是像素完美的。如果你看笔 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

砌体 - 列宽百分比 + 排水沟

Masonry - Column width percent + gutter

javascript

jquery

masonry