Question

我有一个动态生成的div列表，并且奇数的对齐到左边，偶数对齐到右边。当我到达页面底部时，我使用Ajax加载更多div。出于某种原因，当加载新的div时，它们并不像我预期的那样始终与左对齐。我已经尝试将每批的最大div数设置为奇数和偶数，但仍然无法让每次都向左下降然后向右移动。有人可以帮忙吗？

enter image description here

 .cd - timeline - content {
     margin - left: 0;
     padding: 1.6e m;
     width: 45 % ;
 }

 .cd - timeline - content::before {
     top: 24 px;
     left: 100 % ;
     border - color: transparent;
     border - left - color: white;
 }

 .cd - timeline - content.cd - read - more {
     float: left;
 }

 .cd - timeline - content.cd - date {
     position: absolute;
     width: 100 % ;
     left: 122 % ;
     top: 6 px;
     /*font-size: 16px;
     font-size: 1rem;*/
 }

 .cd - timeline - block: nth - child(even).cd - timeline - content {
     float: right;
 }

 .cd - timeline - block: nth - child(even).cd - timeline - content::before {
     top: 24 px;
     left: auto;
     right: 100 % ;
     border - color: transparent;
     border - right - color: white;
 }

 .cd - timeline - block: nth - child(even).cd - timeline - content.cd - read - more {
     float: right;
 }

 .cd - timeline - block: nth - child(even).cd - timeline - content.cd - date {
     left: auto;
     right: 122 % ;
     text - align: right;

 }

下面显示了正在显示的4个项目的HTML结构，最初加载了2个，然后在选择“加载更多”按钮后加载了第2个。

 <div class="cd-timeline-block activity new_file activity-item date-recorded-1428500701" id="activity-205">
    <div class="cd-timeline-img cd-file">
        <span class="dashicons dashicons-media-text"></span>
    </div>
    <div class="cd-timeline-content">
        <span class="cd-date">8 April, 2015</span>
    </div>
</div>

<div class="cd-timeline-block activity new_file activity-item date-recorded-1428500701" id="activity-204">
    <div class="cd-timeline-img cd-file">
        <span class="dashicons dashicons-media-text"></span>
    </div>
    <div class="cd-timeline-content">
        <span class="cd-date">8 April, 2015</span>
    </div>
</div>

<div class="cd-timeline-block activity new_file activity-item date-recorded-1428500701" id="activity-203">
    <div class="cd-timeline-img cd-file">
        <span class="dashicons dashicons-media-text"></span>
    </div>
    <div class="cd-timeline-content">
        <span class="cd-date">8 April, 2015</span>
    </div>
</div>

<div class="cd-timeline-block activity new_file activity-item date-recorded-1428500701" id="activity-202">
    <div class="cd-timeline-img cd-file">
        <span class="dashicons dashicons-media-text"></span>
    </div>
    <div class="cd-timeline-content">
        <span class="cd-date">8 April, 2015</span>
    </div>
</div>

<li class="load-more"><a href="/admin-ajax.php?acpage=3">Load More</a></li>

Answer 1

我可能错了，但是在你的ajax调用之前加载了css会改变行数，所以css可以以奇怪的方式工作。如果我是你，我会创建奇数的类，甚至只有float属性，并在从ajax加载时将此类添加到元素，当然你必须得到行数可见，然后将此值递增1，如果模数为这个数字是0然后你甚至还有奇数。

Answer 2

似乎您正在使用codyhouse的时间轴。

在不深入研究的情况下，我的猜测是您的第n个子方法将不起作用，因为它匹配所有元素而不是类，并且我猜您的收藏夹中有一些未显示的项目。如果不是，那么这是不正确的。

您需要动态地创建一个类，并在该类上使用其行反向

$(".cd-timeline-block").filter(function(index, element) {
        return index % 2 == 1;
    }).addClass("odd");

加载更多元素时，nth-child（奇数/偶数）无法正常工作

2 个答案: