0

我正在使用 Django Endless Pagination。一切正常，没有任何问题，我选择了 Twitter Style with Show More 选项。

这是我还包含媒体查询的结果的 HTML 渲染，因此您可以调整窗口大小并更详细地查看问题。

可以在这里查看：http: //codepen.io/anon/pen/lrLiG

截图：1. 宽屏 2. 片剂 3.苹果手机

我遇到的问题是，通过调整它的 CSS 我想实现我希望“显示更多”始终位于底部并以每个设备为中心桌面 - 平板电脑 - iOS/Android 设备 - 无论你在哪里加载页面，像这样：

结果

“SHOW MORE”的样式不是问题，我需要帮助才能正确定位它。在 HTML 渲染中很容易移动：

 <div class="endless_container">
    <a class="endless_more" href="#">Show More</a>
    <div class="endless_loading" style="display: none;">loading...</div>
</div>

出

<div id="product-board">

但我不能这样做，因为 django 无休止分页的文档我使用了 ajax：

{% load endless %}
{% lazy_paginate photos %}

    {% for photo in photos %}

        {% load cropping %}

        <div class="product large"><a href="/media/{{ photo.main_image }}" data-imagelightbox="e"><img src="{% cropped_thumbnail photo "cropping" %}" alt="" border="0" class="img-responsive"></a></div>

    {% endfor %}

    {% show_more "Show More" "loading..." %}

和

{% show_more "Show More" "loading..." %}

负责

<div class="endless_container">
    <a class="endless_more" href="#">Show More</a>
    <div class="endless_loading" style="display: none;">loading...</div>
</div>

在另一个 div 里面。

解决这个问题的最佳方法是什么？我应该在 django 分页中为 ajax 构建 2 个模板，而不是在 docs 中吗？

谢谢

4

1 回答 1

0

造型 never_container 将解决您的问题：

.endless_container{
    clear: both;
    width: 100%;
    text-align: center;
}
于 2014-05-31T12:43:06.893 回答