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

Posted 2023-03-07

【中文标题】砌体：从最后一列移除排水沟

【英文标题】：Masonry: remove gutter from last column

【发布时间】：2013-07-30 14:10:19

【问题描述】：

一直在使用新版本的 Masonry，它似乎运行起来更加顺畅，尤其是对于我正在做的流畅/响应式构建。

不过，我遇到了一个问题 - 我不知道如何移除 .masonry 容器最右侧的排水沟，以使物品与边缘齐平。

这是代码笔示例：http://codepen.io/iamkeir/pen/xlcBj

我可能会设置一个宽度和overflow:hidden 来剪掉最后一个间隙，但并不理想。

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

任何想法/提示将不胜感激！

【问题讨论】：

同事建议将 .masonry 包装在一个容器中，然后在 .masonry 上添加负边距右侧等于排水沟宽度。这可行，但更喜欢修复而不是破解...... :)

【参考方案1】：

我可以用 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;
            
        

【参考方案2】：

@desandro 在推特上发布了解决方案 - 问题在于我的 % 计算应该是：

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

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

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

【讨论】：

说得有道理，可惜我自己没想到:(

【参考方案3】：

您可以尝试使用 wookmark 或 packery 来删除正确的装订线。

【讨论】：

感谢您的意见 - desandro（砌体开发人员）实际上意识到这是我计算百分比的问题。