Bagaimana untuk meletakkan kotak laman web di sebelah kanan
P粉953231781
2023-08-14 19:16:04
<p>Saya mempunyai masalah di sini, saya cuba meletakkan kotak di sebelah kanan tapak web tetapi tidak tahu mengapa ia tidak berfungsi, saya telah cuba menggunakan <kod>justify-content: flex- tamat;< /code>Jajarkan kotak ke "hujung" halaman, kemudian tambahkan <kod>padding-right</code> . Sebarang bantuan dengan penjelasan akan sangat dihargai.</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">* {
margin: 0;
padding: 0;
saiz kotak: kotak sempadan;
}
.bekas {
lebar: 100%;
ketinggian: 50vh;
warna latar belakang: #1f2937;
kedudukan: statik;
paparan: flex;
flex-direction: lajur;
justify-content: pusat;
}
.footer {
jawatan: mutlak;
bawah: 0px;
lebar: 100%;
ketinggian: 10vh;
warna latar belakang: #1f2937;
warna: putih;
text-align: tengah;
paparan: flex;
justify-content: pusat;
align-item: tengah;
}
.logo {
saiz fon: 24px;
font-family: 'Times New Roman', Times, serif;
warna: putih;
justify-content: ruang-antara;
padding-top: 15px;
keluarga fon: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding-left: 200px;
jawatan: mutlak;
atas: 0;
}
.navbar {
warna:putih;
saiz fon: 18px;
kedudukan: tetap;
lebar: 85%;
atas: 0;
kanan: 0;
margin: auto;
paparan: flex;
align-item: tengah;
justify-content: flex-end;
flex-direction: baris;
padding-top: 15px;
padding-kanan: 200px;
}
.navbar ul li {
gaya senarai: tiada;
paparan: inline-block;
jidar: 0 20px;
hiasan teks: tiada;
}
.text1 {
kedudukan: relatif;
warna: putih;
padding-left: 200px;
saiz fon: 48px;
font-weight: tebal;
lebar: 720px;
}
.text2{
warna: putih;
saiz fon: 18px;
padding-left: 200px;
lebar: 520px;
}
.text3{
text-align: tengah;
paparan:flex;
align-item:center; /*pusat menegak*/
justify-content:right; /*pusat mendatar*/
lebar: 500px;
ketinggian:350px;
warna latar belakang: kelabu;
}
</pra>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laman web</title>
<pautan href="style.css" rel="stylesheet">
</head>
<badan>
<div class="container">
<div class="logo">
<h2>Logo Pengepala</h2>
</div>
<div class="navbar">
<ul>
<li><a href="index.html">pautan pengepala satu</a></li>
<li><a href="index.html">pautan pengepala dua</a></li>
<li><a href="index.html">pautan pengepala tiga</a></li>
</ul>
</div>
<div class="text1">
<h2>Tapak web ini hebat</h2>
</div>
<div class="text2">Tapak web ini mempunyai beberapa subteks yang terdapat di sini di bawah tajuk utama. Ia adalah fon yang lebih kecil dan warnanya adalah kontras yang lebih rendah</div>
<div class="text3">ini ialah pemegang tempat untuk imej</div>
</div>
<div class="footer">
Hak Cipta © Projek Odin 2023
</div>
</badan>
</html></pre>
<p><br /></p>
<p>Saya cuba menggunakan justify-content:flex-end untuk menyelaraskannya tetapi saya berada di hujung akal saya, sejujurnya penjelasan tentang masalah saya akan sangat membantu, saya hanya memasukkan kod CSS yang diperlukan dan keseluruhan HTML fail . Terima kasih terlebih dahulu untuk semua bantuan anda! </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pertama sekali, anda menggunakan sifat flex, walaupun anda belum menetapkan display:flex;
Kedua, untuk membuat div bergerak ke kanan (cth. kotak): (inden mengikut keperluan)
.container{ display:flex; align-items:center; /*垂直居中*/ justify-content:right; /*水平居中*/ }``` #text{ display:block; }