简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bagaimana untuk menetapkan kedudukan imej di sudut kanan atas div skrin?
P粉908138620
P粉908138620 2023-09-10 15:33:50
0
1
596

Saya menggunakan HTML dan Django untuk mencipta aplikasi web. Saya perlu meletakkan div di sebelah kanan skrin. Ia melakukan ini, tetapi ia lebih rendah daripada widget lain. Ia kelihatan seperti ini:

Tempat yang saya bulatkan ialah tempat div, tetapi ia perlu berada di sebelah kanan bahagian atas.

Ini ialah fail HTML saya: 

<!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

membalas semua(1)
P粉771233336
P粉7712333362023-09-11 00:44:13 Tingkat 1

Ini ialah reka bentuk responsif (menggunakan col-md), jadi bukanya dalam skrin penuh dan lihat: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
      <div class="row d-flex justify-content-between">
        <!-- left side -->
        <div class="col-md-7">
          <div class="row border">
            <form class="p-4 mb-4">
              <h2>Find Places</h2>
              <input type="text" class="form-control" />
              <button class="btn btn-primary mt-2">find place</button>
            </form>
          </div>
          <!--  -->
          <br />
          <!--  -->
          <div class="row border">
            <form class="p-4 mt-4">
              <h2>Find Places</h2>
              <input type="text" class="form-control" />
              <button class="btn btn-primary mt-2">find place</button>
            </form>
          </div>
        </div>

        <!-- right side -->
        <div class="col-md-4 d-flex justify-content-center">
          <img
            src=""
            alt=""
            style="width: 200px; height: 200px; background-color: lightgreen"
          />
        </div>
      </div>
    </div>
  </body>
</html>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！