砌體 - 柱寬百分比+排水溝

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的余量。