目前无法在屏幕上显示超过四个投诉。如何更改 html 或 css 以适应更多？

Posted 2023-02-24

【中文标题】目前无法在屏幕上显示超过四个投诉。如何更改 html 或 css 以适应更多？

【英文标题】：Unable to show more than four complaints on screen at the moment. How do I change the html or css to fit more?

【发布时间】：2021-10-02 02:23:13

【问题描述】：

现在，在我的系统中，用户可以输入大约四个投诉，或者最多只能以正确的顺序显示四个投诉。第五个投诉出现在错误的地方，如下所示：

我应该在我的 css 或 html 中进行哪些更改，以便当有人进入第五次投诉时，中间容器增加并且卡片也显示在其他容器下方？现在我正在为四张卡使用四种不同的 CSS，所以这就是问题所在。如何更改它以适应此功能？

html:

<!-- Middle Container -->
    <div class="col-lg middle middle-complaint-con">
        <i class="fas fa-folder-open fa-4x comp-folder-icon"></i>
        <h1 class="all-comp">My Complaints</h1>
        <p class="all-comp-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        %for c in complaint %
        <a href="% url 'Complaint' c.pk %" style="color:black;">
            <div class="container comp-con-forloop.counter0">
                <p style="color: #D37A19; margin-left: -130px; margin-top: -5px;">Report number:</p>
                <p class="history-level-1">c.reportnumber</p>
                <p class="comp-title-1">c.event_type</p>
                <p class="comp-sub-1">c.event_text|truncatechars:85</p>
            </div>
        </a> %endfor%
    </div>

css:

.middle-complaint-con 
        position: absolute;
        width: 1000px;
        height: 650px;
        left: 204px;
        top: 57px;
        background: #FDF8F4;
        box-shadow: 4px 4px 20px 1px rgb(0 0 0 / 25%);
        border-radius: 30px;
    

.comp-con-0 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 11px 8px;
        position: absolute;
        width: 300px;
        height: 140px;
        left: 160px;
        top: 190px;
        background: #FFEEDB;
        box-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
        border-radius: 10px;
    
    
.comp-con-1 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        position: absolute;
        width: 300px;
        height: 140px;
        left: 160px;
        top: 400px;
        background: #FFEEDB;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
    
    
.comp-con-2 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        position: absolute;
        width: 300px;
        height: 140px;
        left: 610px;
        top: 190px;
        background: #FFEEDB;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
    
    
.comp-con-3 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 10px 9px;
        position: absolute;
        width: 300px;
        height: 140px;
        left: 610px;
        top: 400px;
        background: #FFEEDB;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
    

【问题讨论】：

看起来complaint 变量只有 4 个。

不，实际上我没有。我是css的初学者，我不知道它是如何工作的。你能告诉我如何实现吗？

不，投诉变量可以达到任何数字，但由于 css 仅适用于最初的四个 compaint，第五个投诉显示在左上角，而不是卡片格式跨度>

我个人会将其设置为行，以便每一行都有自己的<div>，然后使用模板引擎填充这些 div

你能告诉我怎么做吗？我没有正确理解。

【参考方案1】：

您可以在 django 的帮助下添加分页。 你可以做的是创建一个向下的链接，上面写着查看所有投诉。

一个用户可以有超过 5 条投诉，例如 6、7、100 条左右，因此您可以为其创建一个专用页面并使用分页在每个页面上显示 4 条投诉 Using pagination