cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk menetapkan kedudukan imej di sudut kanan atas div skrin?

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粉908138620P粉908138620442 hari yang lalu613

membalas semua(1)saya akan balas

  • P粉771233336

    P粉7712333362023-09-11 00:44:13

    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>

    balas
    0
  • Batalbalas