Question

我正在尝试使用砌体网格布局创建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);}

Answer 1

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

即

#content { min-height: 101vh; }

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

1 个答案: