如何将Django项目中的目标div调整至页面右上角？

你的问题出在浮动元素的位置顺序以及未利用Bootstrap栅格系统做规范布局。目前你把结果div放在两个表单div之后，即便设置了float:right，它也只能在表单下方的右侧显示。下面提供两种可行方案：

方法1：调整浮动元素位置（快速修复） #

将带float:right的结果div移动到两个表单div的前面，让它先占据右上角位置，左侧表单div会自然填充剩余空间，同时可添加margin-left:2%避免内容重叠：

修改后的关键代码片段：

{% block content %}
    <div style="background-color: white; height: 100%; padding: 2%;">
        <h1 class="mt-2">{{object.destination}} in {{trip_length}} days</h1>
        <hr class="mt-0 mb-4">
        
        {% if place_results_name %}
            <div style="height: 75vh; width: 48%; background-color: white; border: 1px solid #e5e5e5; border-radius: 3px; float:right; margin-left: 2%;">
                <div class="card" style="width: 18rem; padding: 2%; margin: 1%;">
                    <img class="card-img-top" src="{% static 'images/pexels-photo-10768835.jpeg'%}" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">{{place_results_name}}</h5>
                        <p class="card-text">Place description...</p>
                        <button class="btn btn-primary">Add to Trip</button>
                    </div>
                </div>
            </div>
        {% endif %}

        <div style="width: 48%; background-color: white; padding: 2%; border: 1px solid #e5e5e5; border-radius: 3px;">
            <h3 class="mt-3">Find Places</h3>
            <hr class="mt-0 mb-4">

            <form method="post" novalidate>
                {% csrf_token %}
                {{ find_places_form|crispy }}
                <button type="submit" class="btn btn-primary" style="margin-top: 10px;">Find Places</button>
            </form>
        </div>

        <div style="width: 48%; background-color: white; padding: 2%; border: 1px solid #e5e5e5; border-radius: 3px; margin-top: 2%;">
            <h3 class="mt-3">Find Hotels</h3>
            <hr class="mt-0 mb-4">

            <form method="post" novalidate>
                {% csrf_token %}
                {{ find_hotels_form|crispy }}
                <button type="submit" class="btn btn-primary" style="margin-top: 10px;">Find Hotels</button>
            </form>
        </div>
    </div>
{% endblock %}

方法2：使用Bootstrap栅格系统（推荐，更规范） #

既然已引入Bootstrap4，用它的栅格布局实现左右分栏，既符合响应式设计，也能避免inline style的混乱：

修改后的完整代码片段：

{% block content %}
    <div class="container-fluid" style="background-color: white; min-height: 100vh; padding: 2%;">
        <h1 class="mt-2">{{object.destination}} in {{trip_length}} days</h1>
        <hr class="mt-0 mb-4">
        
        <div class="row">
            <!-- 左侧列：中等屏幕及以上占6列，放置两个表单 -->
            <div class="col-md-6">
                <div style="background-color: white; padding: 2%; border: 1px solid #e5e5e5; border-radius: 3px;">
                    <h3 class="mt-3">Find Places</h3>
                    <hr class="mt-0 mb-4">

                    <form method="post" novalidate>
                        {% csrf_token %}
                        {{ find_places_form|crispy }}
                        <button type="submit" class="btn btn-primary" style="margin-top: 10px;">Find Places</button>
                    </form>
                </div>

                <div style="background-color: white; padding: 2%; border: 1px solid #e5e5e5; border-radius: 3px; margin-top: 2%;">
                    <h3 class="mt-3">Find Hotels</h3>
                    <hr class="mt-0 mb-4">

                    <form method="post" novalidate>
                        {% csrf_token %}
                        {{ find_hotels_form|crispy }}
                        <button type="submit" class="btn btn-primary" style="margin-top: 10px;">Find Hotels</button>
                    </form>
                </div>
            </div>

            <!-- 右侧列：中等屏幕及以上占6列，放置结果卡片 -->
            {% if place_results_name %}
            <div class="col-md-6">
                <div style="height: 75vh; background-color: white; border: 1px solid #e5e5e5; border-radius: 3px;">
                    <div class="card" style="width: 18rem; padding: 2%; margin: 1%;">
                        <img class="card-img-top" src="{% static 'images/pexels-photo-10768835.jpeg'%}" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">{{place_results_name}}</h5>
                            <p class="card-text">Place description...</p>
                            <button class="btn btn-primary">Add to Trip</button>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

说明： #

• 栅格的row和col-md-6会在屏幕宽度≥768px时自动分成左右两栏，每栏占50%宽度，和你原有的48%宽度效果接近，还能自适应小屏幕。
• 右侧结果div会始终与左侧表单div处于同一行的右上角位置，不会被挤到下方。

内容的提问来源于stack exchange，提问作者kool