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> 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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>