Question

我使用无限滚动将新图像加载到图库中。这些图像的父div具有样式＆＃34; text-align：justify＆＃34;将图像在它们之间以相等的边距展开。但是，当新图像加载无限滚动时，新项目似乎与左侧对齐。

HTML（加载AJAX内容后）：

<div id="content">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div id="pagination">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

CSS：

#content {text-align:justify;}

使用Javascript：

<script>
    $('#content').infinitescroll({

        navSelector : "#pagination",            
        nextSelector : "#pagination #next a:first",    
        itemSelector : "#content .item",        
        bufferPx : 5,
        debug : true,
        loading: {
        msgText : " ", 
        img : "loading.gif",
        finishedMsg : " ",
        }  
    });
</script>

使用上面的代码，前四个项是合理的，而最后四个（在分页链接后）是左对齐的。我尝试将#content设置为＆＃34; visibility：hidden＆＃34;作为测试，在这种情况下，新项继承了visibility属性。任何人都可以告诉我为什么＆＃34; text-align：justify＆＃34;财产是不是继承？提前谢谢！

Answer 1

我找到了解决方案。将您的.item放在这样的包装器中：

<div id="content">
    <div class="wrapper">
        <div class="item">...</div>
        <div class="item">...</div>
        <div class="item">...</div>
        <div class="item">...</div>
    </div>
    <div id="pagination">...</div>
</div>

并在无限滚动脚本中将itemSelector更改为.wrapper，如下所示：

<script>
    $('#content').infinitescroll({
        navSelector : "#pagination",            
        nextSelector : "#pagination #next a:first",    
        itemSelector : "#content .wrapper",   //Change .item to .wrapper     
        bufferPx : 5,
        debug : true,
        loading: {
        msgText : " ", 
        img : "loading.gif",
        finishedMsg : " ",
        }  
    });
</script>

我认为当您将项目包装在包装器中并将此包装器附加到#content时，空白区域将随您的.item一起出现。正如this answer中所述，理由依赖于空格，如果您选择.item附加到#content，则会删除空格，这会使text-align: justify无法对齐您的项目。

新内容不是继承具有无限滚动的父div的样式

1 个答案: