砌體：從最後一列移除排水溝

Question

一直在使用新版本的砌體，這似乎工作更平滑，特別是對於我正在做的流體/響應構建。

然而，我遇到了一個問題 - 我不知道如何去除.masonry容器最右側的裝訂線，以便物品與邊緣齊平。

這裏是codepen例如：http://codepen.io/iamkeir/pen/xlcBj

我可能設定的寬度和overflow:hidden裁剪關閉該最後間隙，但並不理想。

同樣，我試着添加一個padding-left: 1%，但這改變了容器的寬度，因此百分比不再準確。

任何想法/提示將不勝感激！

Answer 1

你可以嘗試wookmark或packery刪除正確的天溝。

Answer 2

@desandro親切啾啾的解決方案 - 問題是我的計算％應該已經：

(container width - (columns * column width))/number of gutters = gutter width

所以，在我的例子：(100% - (4 * 24%))/3) = 1.33333333333333%

http://codepen.io/desandro/pen/ybluC

Answer 3

我能夠用calc（）來做到這一點。使用0邊距，0填充，20像素線槽和1200像素網格，這裏有1,2,3和4列左右齊平的設計。 CALC -10px想包，所以我在我的計算中使用-11px：

 #grid .item { 
      float: left; 
      padding: 0; 
      width: 100%; 
      margin: 0; 
     } 

     @media only screen and (min-width: 500px) { 
      #grid .item { 
       width: calc(50% - 11px); 
      } 
     } 

     @media only screen and (min-width: 800px) { 
      #grid .item { 
       width: calc(33% - 11px); 
      } 
     } 

     @media only screen and (min-width: 1200px) { 
      #grid .item { 
       width: 285px; 
      } 
     }