Saya mempunyai halaman dengan tajuk dan beberapa kandungan. Pengepala ialah nilai dinamik dan boleh mempunyai banyak kandungan berbeza bergantung pada kandungan. Masalah ini berlaku apabila tajuk panjang dan memerlukan dua baris atau lebih. Memandangkan saya mahu kandungan kekal dalam kedudukan menegak dan mendatar yang sama, saya mahu baris terakhir tajuk yang lebih panjang berada dalam kedudukan menegak yang sama dengan baris pertama jika tajuk lebih pendek.
Saya harap saya dapat membuat orang lain memahami diri saya sendiri. Sila cuba edit tajuk dengan menambah perkataan kedua dan anda akan melihat apa yang saya maksudkan.
Saya rasa masalah ini boleh diselesaikan dengan flex-box tetapi saya tidak tahu bagaimana, saya telah mencuba banyak perkara yang berbeza dengan flex-end dll.
Ini adalah contoh kod saya:
.main {
display: flex;
justify-content: center;
min-height: 200px;
border: 1px solid black;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid red;
width: 200px;
height: 300px;
padding-top: 20px;
gap: 20px;
}
.header-div {
display: flex;
border: 1px solid blue;
align-items: center;
text-align: center;
max-width: 100px;
}
.header {
border: 1px solid green;
}
.content {
border: 1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="wrapper">
<div class="header-div">
<h1 className="header">Header</h1>
</div>
<div class="content">Test</div>
</div>
</div>
</body>
</html>
Terima kasih terlebih dahulu!
Edit Ini adalah imej yang dibuat dengan buruk yang menggambarkan matlamat saya. Gambar di sebelah kiri ialah apabila tajuk menduduki satu baris, dan gambar kedua ialah apabila tajuk menduduki dua baris:
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tukar CSS kelas .wrapper:
.wrapper { display: grid; grid-template-rows: auto 1fr; align-items: center; justify-items: center; border: 1px solid red; width: 200px; height: 300px; padding-top: 20px; gap: 20px; }Di sini, kami menggunakan paparan: grid untuk membuat reka letak grid. Sifat grid-template-rows mentakrifkan dua baris: satu untuk tajuk dan satu untuk kandungan. Nilai auto akan menjadikan baris pengepala melaraskan kepada ketinggian kandungan, manakala nilai 1fr akan menjadikan baris kandungan mengambil ruang yang tinggal. Ciri-ciri item align dan justify-item memusatkan kandungan dalam baris masing-masing.
Sekarang, kemas kini HTML anda supaya elemen h1 mempunyai atribut kelas dan bukannya atribut className:
Header
Dengan perubahan ini, pengepala akan kekal di atas pembalut dan kandungan akan kekal dalam kedudukan menegak dan mendatar yang sama tanpa mengira panjang pengepala. Anda boleh mengujinya dengan menukar teks tajuk untuk melihat prestasinya pada panjang yang berbeza.