7

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

然而，我遇到了一个问题 - 我不确定如何移除 .masonry 容器最右侧的排水沟，以便物品与边缘齐平。

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

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

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

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

4

3 回答 3

14

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

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

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

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

于 2013-07-30T12:59:15.430 回答
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;
            }
        }
于 2016-02-19T00:34:55.983 回答
0

您可以尝试使用 wookmark 或 packery 来删除正确的排水沟。

于 2013-07-30T12:42:01.130 回答