Jquery 砌体百分比项目超出页面宽度

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

我试图通过将滚动条设置为5px并将帖子的容器（#content）设置为（100%-5px）来解决这个问题。这在Chrome中非常有效，但并非在所有浏览器中都有效

我不想隐藏滚动条。我确信这个问题是由于砖石造成的，因为在砖石容器外25%宽度的位置放置4个div很好

相关代码如下：

砌体规范

$(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);}

---

一个黑客解决方案是将

min height

添加到比窗口大的砌体容器中，以便滚动条始终存在

i、 e

---

为什么要做

width:calc（100%/4）而不是
宽度：25%？另外，对于我的浏览器，它只显示了3个在一行。此外，您还设置了两次
columnWidth
，一次设置为
'.grid sizer'
，另一次设置为
1
@JoeLissner感谢您的回复。我将其设置为该值，因为我在行数（2、3、4等）之间不断变化。为了这个问题，我应该编辑它，但它在代码中没有任何效果。我知道它显示了3-因为滚动条没有包含在宽度中，所以我无法容纳4个项目（这就是问题所在）。在某些浏览器中，它们会溢出，而在某些浏览器中，它们会移动到3列中。我删除了第二个columnWidth（感谢你发现了它，不知何故我完全错过了它），但现在图像都堆在了一起。由于你使用的插件，图像被完全放置在渲染上，这意味着如果我们不能在渲染之前进入，就很难排除故障。您认为您可以创建一个JSFIDLE供我们使用吗？设置
.entry{width:20%}
假设.grid sizer是包装器的直接子项如何。谢谢，但实际上我已经这样做了。不幸的是，它不起作用。你有没有尝试过将最小高度添加到身体上？另外，作为一个补充说明，你所拥有的东西在我的mac上的chrome上运行，可能是因为隐藏了本机滚动条。如果这不起作用，也许可以尝试添加这个<代码>$（窗口）.resize（函数（）{$（“#内容”）.massey（）；}）
#content { min-height: 101vh; }