砌体：从最后一栏中移除排水沟

Question

一直在使用新版本的Masonry，它似乎工作得更顺畅，特别是对于我正在进行的流畅/响应式构建。

然而，我遇到的一个问题是 - 我不知道如何移除.masonry容器最右侧的装订线，以便物品与边缘齐平。

以下是codepen示例：http://codepen.io/iamkeir/pen/xlcBj

我可以设置一个宽度overflow:hidden来裁掉最后一个差距，但不理想。

同样，我尝试添加padding-left: 1%，但这会更改容器的宽度，因此百分比不再准确。

非常感谢任何想法/提示！

Answer 1

@desandro亲切地在Twitter上发布了解决方案 - 问题在于我的％计算应该是：

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

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

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

Answer 2

我能用calc（）做到这一点。使用0边距，0填充，20px排水沟和1200px网格，这里设计了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;
            }
        }

Answer 3

你可以试试wookmark或者包装去除正确的排水沟。