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

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

上面接受的答案不是像素完美的。如果您看着笔http://codepen.io/anon/pen/aOLxwW，您会在右边看到一个装订线，这可能不是您想要的，至少不是我想要的。这是由于使用

计算出的项目宽度太小了

.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

Answer 3

在将自己的CSS添加到HTML元素之前，只需将css规范化。它会奏效。它从继承的css中为div添加了保证金。