时间戳

首页 > 解决方案 > 为每个评论创建单独的边框 Django Css

jquery - 为每个评论创建单独的边框 Django Css

问题描述

我很难找到一种方法来为类似于下面的每个评论创建一个单独的边框框。

在此处输入图像描述

但是，当我添加新评论时，边框会翻倍，如下所示

在此处输入图像描述

我目前正在使用 Django/python 这是我的 html 文件

  <div class="comments--section ">
    {% for comment in comments %}
    <div class="comments--border">
      <p class="comments--user">{{comment.user }}</p>
      <p class="comments--date">{{comment.date_added|date:'M d, Y' }}</p>
      <p class="comments--entry">{{ comment }}</p>


      {% if request.user.is_superuser %}
      <p>
        <a href="{% url 'blogging_logs:delete_comment' comment.id %}">Delete comment</a>
      </p>
      {% else %}
        {% if comment.user == request.user %}
          <p>
            <a href="{% url 'blogging_logs:delete_comment' comment.id %}" class="comments--delete">Delete comment</a>
          </p>
          </div>
          {% else %}
          {% endif %}
      {% endif %}
    {% empty %}
      <p>no comments entered yet.</p>
    {% endfor %}
  </div>

css 文件：

&--section {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2
  }

  &--border {
    border-style: solid;
    border-width: 1px;
    margin-bottom: 2rem;
  }


  &--user {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0;

  }

  &--date {
    font-size: .7rem;
    font-weight: 300;
  }

  &--entry {
    font-weight: 300;
    font-size: 1rem;
  }

我知道我的边界加倍的原因，但我不知道如何绕过它。如果我将 div 类移到循环之外，它会为每个评论创建一个大框，而不是单独的框。有什么建议么？

谢谢！

标签： jqueryhtmlcssdjango

解决方案

  <div class="comments--section ">
       {% for comment in comments %}
       <div class="comments--border">
            <p class="comments--user">{{comment.user }}</p>
            <p class="comments--date">{{comment.date_added|date:'M d, Y' }}</p>
            <p class="comments--entry">{{ comment }}</p>

           {% if request.user.is_superuser %}
            <p>
               <a href="{% url 'blogging_logs:delete_comment' comment.id %}">Delete comment</a>
            </p>
          {% elif comment.user == request.user %}
            <p>
               <a href="{% url 'blogging_logs:delete_comment' comment.id %}" class="comments--delete">Delete comment</a>
            </p>

            {% else %}
              <p> ** You can add any message if you wish**
              </p>
           {% endif %}

     </div>
     {% empty %}
     <div class='comments--border'>
           <p>no comments entered yet.</p>
     </div>
     {% endfor %}
  </div>

在这里，我更改了一些您的 HTML。django 中还有一个 elif 标签。因此，您可以使用它而不是在嵌套中编写 if。

推荐阅读