python - 使用 django 块时如何使用 div

Question

我在后端使用 Django 3.1.7 并有一个三页
1.index（主页） 2.Transhow 我使用块来减少和重用索引代码。我有几个页面，所有页面都需要使用相同的 CSS，但是当我使用块语句时，div 不起作用。

   <div id="content">
        <div id="header">
            <div id="brand">
                <h1><a href="#">حسابداری</a></h1>
            </div>
            <div id="searchbox">
                <form action="search" method="get">
                    <input type="text" placeholder="حساب مورد نظر" class="text">
                    <input type="submit" value="جستجو" class="submit">
                </form>
            </div>
             <div class="clear">
             </div>
        </div>
        <div id="toolbar">
                <ul>
                    <li><a href="http://127.0.0.1:8000" class="active">خانه</a></li>
                    <li><a href="Account_show">مدیریت حساب</a></li>
                    <li><a href="Trans_show">مدیریت اسناد</a></li>
                    <li><a href="Article_show">دفتر روزنامه</a></li>
                    <li><a href="Category_show">گروه سرفصل</a></li>
                    <li><a href="about_us">درباره ما</a></li>
                    <li><a href="logout_page">خروج</a></li>
                </ul>
        </div>
        <div id="main">
            {% block main %}

            {% endblock %}
        </div>
        <div id="footer"></div>
    </div>

转页

{%block main%}
        <table>
        <tr>
            <th>ردیف</th>
            <th>شماره سند</th>
            <th>تاریخ</th>
            <th>توضیحات</th>
            <th>عطف</th>
            <th>ویرایش</th>
        </tr>
        {%for record in records%}
            <tr>
                <td><a href="article/{{record.id}}">{{record.id}}</a></td>
                <td><a href="article/{{record.id}}">{{record.sanadno}}</a></td>
                <td><a href="article/{{record.id}}">{{record.tdate}}</a></td>
                <td><a href="article/{{record.id}}">{{record.tdesc}}</a></td>
                <td><a href="article/{{record.id}}">{{record.tres}}</a></td>
                <td><a href="edit/Tran_edit/{{record.id}}">ویرایش</a></td>
            </tr>
        {%endfor%}
        {% if records.has_previous %}
            <a href="?page=1">اولین</a>
            <a href="?page={{ records.previous_page_number }}">قبل</a>
        {% endif %}
      صفحه {{ records.number }} از {{ records.paginator.num_pages }}. {% if records.has_next %}
    <a href="?page={{ records.next_page_number }}">بعدی</a>
    <a href="?page={{ records.paginator.num_pages }}">قبلی</a>
{% endif %}

    </table>
{%endblock%}

页面

#content {
    width: 1050px;
    border: 1px solid grey;
    height: 100px;
    margin: 0 auto;
}

#header{
    height: 100px;
    padding: 10px 0;
    border: 1px solid red;
}

#brand {
    float: right;
}

h1 a{
    font-size: 50px;
    font-weight:100;
    color:black;
    text-decoration: none;
}

#searchbox{
    float: left;
    background: linear-gradient(#E1F1B2,#BCEA5E);
    width: 400px;
    height: 50px;
    padding: 20px 20px 0 20px;
    margin-top: 10px;

}

.text{
    float: right;
    width: 200px;
    padding: 5px;
    font-size: 15px;
    color: #E36A23;
    background: white url(images/search.png) left center no-repeat;
}

.submit{
    float: left;
    padding: 5px;
    font-weight: bold;
    color: black;
    background: #A751D6;
    font-size: 15px;
}

.clear {
    clear: both;
}

#toolbar{
    height: 70px;
    background: linear-gradient(#F2F084,#D8D83B);
    padding: 7px 0;
}

ul {
    list-style: none;
    
}

#toolbar ul li{
    float: right;
    padding: 0 30px;
    height: 30px;
    border-right: 1px solid #5d12e7;
}

#toolbar ul li:last-child{
    border-left: none;
    
}


#toolbar ul li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 17px;
    color: #5d12e7;
    line-height: 30px;
    -webkit-transition: font-size 0.5s ease;
    -moz-transition: font-size 0.5s ease;
    -o-transition: font-size 0.3s ease;
    -ms-transition: font-size 0.5s ease;
    transition: font-size 0.5s ease;
}

#toolbar ul li a:hover , #toolbar ul li a.active{
    font-size: 20px;
    font-weight: bold;
    color: #B314DB;
}

#main{
    background: linear-gradient(#E3F2B6,#B8EA55);
    padding: 30px;
    margin: 15px 0;
}

主 div 无法正常工作。当我运行我的服务器时，主 div 向左移动。这发生在所有使用块的 HTML 页面上。其余的 div 可以正常工作，但使用块的 div 不能正常工作。

标签： pythoncssdjango