Question

我在一个页面中有four <div>。我想在每个25上显示<div>条记录。我写了凌乱的代码。它不起作用。你能帮帮我吗？谢谢

    <div one >  <div two>   <div three> <div four>
1               26          51          76
2               27          52          77
3               28          53          78
-               -           -           -
-               -           -           -
25              50          75          100
</div>        </div>     </div>     </div>

这是模板代码。

 <div class="fourcolumnswrapper">
      <div class="moviescolumn">
     {% for movie in movies.object_list %}
    <a href="{{ movie.get_absolute_url}}">{{ movie.title }}</a><br/>
    <!-- Display first 25 record in one div -->
    {% if forloop.counter == 25 %}

        </div>
        {% endif %}
    {% if forloop.counter > 25 and forloop.counter <= 50 %}
        <div class="moviescolumn">

        {% if forloop.counter == 50 %}
            </div>
        {% endif %} 
    {% endif %}
    {% if forloop.counter > 50 and forloop.counter < 75 %}
        <div class="moviescolumn">

        {% if forloop.counter == 75 %}
            </div>
        {% endif %} 
    {% endif %}
     {% endfor %}


    </div>

更新输出：http://i.imgur.com/zuc8y.png以下是源代码generated by view source。 http://dpaste.org/dxKi8/

Answer 1

为什么将DIV用于表格数据？有一个非常好的TABLE元素。

Answer 2

你可能想要输出这样的东西：

<div class="fourcolumnswrapper">
  <div class="moviescolumn">
    <a href="movie_link.html">Movie title here 1</a><br />
    <a href="movie_link.html">Movie title here 2</a><br />
    <a href="movie_link.html">Movie title here 3</a><br />
    <a href="movie_link.html">Movie title here 4</a><br />
    <a href="movie_link.html">Movie title here 5</a><br />
  </div>
  <div class="moviescolumn">
    <a href="movie_link.html">Movie title here 6</a><br />
    <a href="movie_link.html">Movie title here 7</a><br />
    <a href="movie_link.html">Movie title here 8</a><br />
    <a href="movie_link.html">Movie title here 9</a><br />
    <a href="movie_link.html">Movie title here 10</a><br />
  </div>
  <div class="moviescolumn">
    <a href="movie_link.html">Movie title here 11</a><br />
    <a href="movie_link.html">Movie title here 12</a><br />
    <a href="movie_link.html">Movie title here 13</a><br />
    <a href="movie_link.html">Movie title here 14</a><br />
    <a href="movie_link.html">Movie title here 15</a><br />
  </div>
  <div class="moviescolumn">
    <a href="movie_link.html">Movie title here 16</a><br />
    <a href="movie_link.html">Movie title here 17</a><br />
    <a href="movie_link.html">Movie title here 18</a><br />
    <a href="movie_link.html">Movie title here 19</a><br />
    <a href="movie_link.html">Movie title here 20</a><br />
  </div>
</div>

要将fourcolumnswrapper中的div显示为四列，您将需要此css：

.fourcolumnswrapper {
  width:1000px; /* width must be set */
}

.moviescolumn {
  float:left;
  width: 25%;
}

最后要在Django模板系统中实现这一点，你可以写：

<div class="fourcolumnswrapper">
  <div class="moviescolumn">
    {% for movie in movies.object_list %}
    <a href="{{ movie.get_absolute_url}}">{{ movie.title }}</a><br/>
    {% if forloop.counter|divisibleby:"25" and not forloop.last %}
  </div>
  <div class="moviescolumn">
    {% endif %}
    {% endfor %}
  </div>
</div>

您可以看到最终效果here on JSFiddle。

Answer 3

你做错了。试试这个

<div class="moviescolumn">

    {% for movie in movies.object_list %}
<a href="{{ movie.get_absolute_url}}">{{ movie.title }}</a><br/>
<!-- Display first 25 record in one div -->
{% if forloop.counter == 25 %}
<!-- Paginator-->
<!-- End Paginator -->
</div>
<div class="moviescolumn">
{% endif %}
{% if forloop.counter == 50 %}
</div>
<div class="moviescolumn">
{% endif %}
{% if forloop.counter == 75 and forloop.counter < 100 %}
</div>
{% endif %}
{% endfor %}

关于for循环（循环模板）

3 个答案: