Question

我正在尝试显示问题列表（想想Stack Overflow的问题列表），并使用网格来显示它们。我想在content部分中显示所有问题，并为其他内容分别设置sidebar部分。该网页基本上是look like this; A =内容，B1 =侧边栏。

问题是，我无法弄清楚如何重复content部分中的问题列表而不重复sidebar部分中的内容。我的content部分本身就是一个网格。

我该怎么办？

这不起作用，因为content类重复

<div class="body">

    {% for question in questions %}
    <div class="content">
        <div class="content1">
            ... content here
        </div>
        <div class="content2">
            ... content here
        </div>
    </div>
    {% endfor %}

    <div class="sidebar">
        ... content here
    </div>

</div>

这样做有效，但它不是最佳的，因为sidebar部分也会重复

{% for question in questions %}
<div class="body">

    <div class="content">
        <div class="content1">
            ... content here
        </div>
        <div class="content2">
            ... content here
        </div>
    </div>

    <div class="sidebar">
        ... content here
    </div>

</div>
{% endfor %}

CSS

.body {
    display: grid;
    grid-template-columns: 3fr 1fr;
}

.content {
    display: grid;
    grid-template-columns: 40px 500px 200px;
}

Answer 1

你包括身体标签，你也需要省略那个尝试这样的

<div class="body">
    {% for question in questions %}
    <div class="content">
        <div class="content1">
            ... content here
        </div>
        <div class="content2">
            ... content here
        </div>
    </div>

    <div class="sidebar">
        ... content here
    </div>
    {% endfor %}
</div>

Answer 2

如果我得到你想要的是content div中的内容重复

<div class="body">

<div class="content">
   {% for question in questions %}
    <div class="content{{ forloop.counter }}"> <-- for incrementing number from 1 to n(number of objects). 
        ... content here
    </div>
   {% endfor %}
</div>

<div class="sidebar">
    ... content here
</div>

CSS + Django - 显示带网格的项目列表？

2 个答案: