砌体百分比项目溢出页面宽度答案

【问题标题】：Masonry percentage items are overflowing width of page砌体百分比项目溢出页面宽度
【发布时间】：2017-06-24 12:13:46
【问题描述】：

我正在尝试使用砖石网格布局创建一个 tumblr 主题。我希望所有的帖子（.entry）都是页面宽度的 25%。但是，加载图像时不会考虑侧边栏。图像总是以 17px 溢出页面的一侧，与我浏览器中滚动条的宽度相同。

我试图通过将滚动条设置为 5px 并将帖子的容器 (#content) 设置为 (100% - 5px) 来解决此问题。这在 Chrome 中效果很好，但不是在所有浏览器中。

我不想隐藏滚动条。我确信问题是由于砌体造成的，因为在砌体容器外以 25% 的宽度放置 4 个 div 可以正常工作。

The full code can be seen here.The theme can be viewed here.相关代码如下：

砌体规范

$(function(){
var $container = $('#content');
$container.imagesLoaded(function() {
    $container.masonry({
        itemSelector: '.entry',
        columnWidth: '.grid-sizer',
        percentPosition: true,
        isAnimated:true,
        columnWidth:1,
        animationOptions:{duration:350, queue:false},
        isFitWidth: false,
    });
});

CSS

#content{
position: relative;
text-align: center;
width: 100%;
height: 100%;}

body {
margin: 0;
font-family: {font:Main Text}; 
font-weight:400;
font-size: 11px;
line-height: 18px;
color:{color:Post Text};
text-align: left;
min-height: 110vh;
word-wrap: break-word;
background-color: {color:Background};
width: 100%;}

.entry{
background-color:{color:Post Background};
text-align: left;
position: relative;
overflow: hidden;
width: calc((100%) / 4);
margin:0;
padding:0;
border:0;
float: right;}

.grid-sizer{width: calc(100% / 4);}

【问题讨论】：

你为什么用width: calc(100% / 4);而不是width: 25%;？此外，对于我的浏览器，它只连续显示 3 个。此外，您将columnWidth 设置了两次，一次为'.grid-sizer'，另一次为1
@JoeLissner 感谢您的回复。我将其设置为，因为我在行数（2,3,4 等）之间不断变化。为了这个问题，我应该编辑它，但无论如何它对代码没有影响。我知道它显示 3 - 因为滚动条未包含在宽度中，所以我无法放入 4 个项目（这就是问题所在）。在某些浏览器中它们会溢出，而在某些浏览器中它们会移动到 3 列中。我删除了第二个 columnWidth（感谢您发现它，我完全错过了它）但现在图像都堆积在彼此之上。
由于您使用的插件，图像绝对定位在渲染上，这意味着如果我们无法在渲染前进入，则很难解决它。你认为你可以为你的问题创建一个 jsfiddle 供我们玩吗？
假设 .grid-sizer 是包装器的直接子级，那么设置 .entry { width:20% } 怎么样。 masonry.desandro.com/options.html#percentposition

标签： jquery tumblr jquery-masonry masonry tumblr-themes

【解决方案1】：

一个 hack 解决方案是将min-height 添加到比窗口大的砌体容器中，以便滚动条始终存在。

即

#content { min-height: 101vh; }

【讨论】：

谢谢，但我实际上已经这样做了。不幸的是，它不起作用。
您是否尝试将最小高度添加到身体？另外作为一个侧面说明，你所拥有的东西在我的 Mac 上的 chrome 上工作，可能是由于隐藏了本机滚动条。
如果这不起作用，也许尝试添加这个？ $(window).resize(function(){$("#content").masonry(); });