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

Posted 2023-03-05

【中文标题】新内容不继承父 div 的无限滚动样式

【英文标题】：New content is not inheriting style of parent div with infinite scroll

【发布时间】：2014-07-21 01:35:32

【问题描述】：

我正在使用无限滚动将新图像加载到图库中。这些图像的父 div 的样式为“text-align: justify”，以将图像分布在线条上，它们之间的边距相等。但是，当无限滚动加载新图像时，新项目似乎向左对齐。

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 设置为“visibility:hidden”作为测试，在这种情况下，新项目 did 继承了可见性属性。谁能告诉我为什么“text-align：justify”属性没有被继承？提前致谢！

【问题讨论】：

你有没有想过这个问题？我也有同样的问题。

我也有同样的问题！

【参考方案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 无法对齐您的项目。