简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
화면 div의 오른쪽 상단에 이미지 위치를 설정하는 방법은 무엇입니까?
P粉908138620
P粉908138620 2023-09-10 15:33:50
0
1
594

저는 HTML과 Django를 사용하여 웹 애플리케이션을 만들고 있습니다. div를 화면 오른쪽에 배치해야 합니다. 이렇게 하고 있는데 다른 위젯에 비해 가격이 낮네요. 다음과 같습니다:

원으로 표시한 곳이 div가 위치할 곳인데, 상단 오른쪽에 있어야 합니다.

이것은 내 HTML 파일입니다: 

<!doctype html>
{% load static %}
{% load crispy_forms_tags %}

<html lang="en" data-bs-theme="dark">
    <head>
        <title>{{object.destination}} in {{trip_length}} days</title>
        <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.png' %}"/>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>

    <body id="bg" style="margin:0px">
        {% 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">
                
                <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|crispyA }}
                        <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>
                {% if place_results_name %}
                    <div style="height: 75vh; width: 48%; background-color: white; border: 1px solid #e5e5e5; border-radius: 3px; float:right">
                        <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>
        {% endblock %}
    </body>
</html>

P粉908138620
P粉908138620

모든 응답(1)
P粉771233336
P粉7712333362023-09-11 00:44:13 1층

이것은 반응형 디자인(col-md 사용)이므로 전체 화면으로 열어서 살펴보세요:

으아악
좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！