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

【问题标题】：New content is not inheriting style of parent div with infinite scroll新内容不继承父 div 的无限滚动样式
【发布时间】：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”属性没有被继承？提前致谢！

【问题讨论】：

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

标签： jquery css inheritance infinite-scroll

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

【讨论】：