首页 > 解决方案 > 如何阻止我的 css 在 django 中重叠?

问题描述

因此,在渲染时我遇到了问题,因为我的两个元素重叠。

图片:https ://imgur.com/0HDbWqo

这是相关代码:

    <style type="text/css">
    .box{
        position: absolute;
        left: 50px;
        width: calc(80% - 100px);
        border: 1px solid black;
        border-radius: 10px;
        padding: 5px;
        text-align: center;
    }
</style>

<h1>Post Title</h1>
<small> by dell | Posted on Nov. 7, 2020, 9:40 p.m. </small>

<br/>
<div class="box">
<p> <p>Sample Post Body</p></p>
</div>
<br/>


    <form method="POST">
        <div class="form-group">

        <input type="hidden" name="csrfmiddlewaretoken" value="zlYmcOuhui0Tv0n3vtQ8gM7AE6cvbXbZSyXwudTzEN8M30RoYNzfgHGmaKx5IhiM"><p><label for="id_body">Body:
</label> <textarea name="body" cols="40" rows="10" required id="id_body">
</textarea></p>

        <button class="btn btn-secondary"> submit comment </button>
        </div>
    </form>

我似乎无法弄清楚如何使 Post 正文和 Form 元素分开。

标签: htmlcssdjango

解决方案


这个问题首先与 django 无关,因为盒子的位置是绝对的,要么删除position: absolute;要么有表单和盒子类,无论它是 div 还是按钮,分别在不同的 div 中,并<br>在它们之间添加


推荐阅读