2

我正在尝试使用砖石网格布局创建一个 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);}
4

1 回答 1

0

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

IE

#content { min-height: 101vh; }
于 2017-06-27T13:16:26.240 回答