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

Question

我正在使用无限滚动将新图像加载到图库中。这些图像的父 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 继承了visibility 属性。谁能告诉我为什么不继承“text-align: justify”属性？提前致谢!

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 未能对齐您的元素。