Страница канала - django / HTML

Я создаю сайт социальной сети, используя Django, HTML. У меня есть страница со списком блогов, на которой перечислены все сообщения от пользователей. Как я могу перечислить сообщения в отдельных плитках или контейнерах на странице списка блогов, например fb. В настоящее время он отображает все сообщения в одном контейнере. Но я хочу, чтобы они разошлись. Спасибо.

blog_list.html

  <section>

    <br>
  <div class = "container" id  = "main-cont">
    <div class = "row">
     <div class = "panel panel-default post">
      <div class  = "panel-body">
       <div class  = "row">
        <div class = "col-sm-1">
          <a class  = "post-avatar thumbnail" href = "#"><img src  = "{% static 'img/group.png' %}"></a>
        <!--  <hr>Created By: {{ post.author }}-->
        <div>
          {% for post in post_list %}
              <div class = "post">

                  <h2><a href = "{% url 'post_detail' pk=post.pk %}">{{ post.title }}<br></h2>

                    <br>
                    <br>



          {% endfor %}
      </div>
      {% endblock %}
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
49
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не уверен, почему вы просто не повторяете снова цикл post_list и не охватываете новый контейнер. Однако то же самое можно сделать и двумя другими способами. Не уверен, что подходит лучше всего. Самый простой - сделать это с помощью директивы {% if %}, чтобы запустить текущий цикл:

{% for post in post_list %}
    {% if forloop.counter > 5 %}  # Logic for new container
        <div>New Containers</div>
    {% else %}
        <div>First Five Containers</div>
    {% endfor %}
{% endfor %}

Другие вопросы по теме