Letakkan blok responsif dalam lajur lentur
P粉545682500
2023-09-03 19:51:51
<p>Saya mempunyai tapak web permainan yang mempunyai pengepala, papan dan pengaki. Saya memerlukan ketiga-tiganya untuk dimuatkan di dalam port pandangan. Papan harus lebih kecil untuk mencapai ini. </p>
<p>Minifikasi ialah masalah yang saya hadapi. Saya telah mendapat respons lebar tetapi bukan ketinggian yang terhad. </p>
<p>Papan hendaklah kekal segi empat sama dan menempati ruang yang tidak digunakan atau mengecut untuk mengelakkan limpahan. </p>
<p>Saya melakukan sesuatu mengikut garisan di bawah, tetapi papan itu akhirnya melimpahi ketinggian ibu bapa. </p>
<p>Dalam kod sebenar saya, ketinggian tajuk tidak diketahui kerana pembalut baris. Pengaki mempunyai jumlah teks yang berbeza-beza. Di dalam papan catur terdapat satu siri div yang mewakili baris dan satu siri elemen kanak-kanak yang mewakili petak pada papan catur. Segi empat sama mempunyai nisbah bidang</p>
<p>
<pre class="brush:css;toolbar:false;">.parent {
ketinggian: 100vh;
warna latar belakang: kelabu;
paparan: flex;
flex-direction: lajur;
}
.kepala {
ketinggian: 10px;
warna latar belakang: biru;
}
.anak {
warna latar belakang: merah;
lentur: 1 1 auto;
}
.papan catur {
lebar: 100%;
ketinggian maksimum: 100%;
nisbah aspek: 1/1;
warna latar belakang: ungu;
margin: auto;
}
.footer {
ketinggian: 10px;
warna latar belakang: hijau;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="parent">
<div class="header">
</div>
<div class="child">
<div class="papan catur">
</div>
</div>
<div class="footer">
</div>
</div></pre>
</p>
<p>Terima kasih atas sebarang bantuan. </p>
Anda telah
aspect-ratio
memberitahu papan supaya mempunyai ketinggian yang sama dengan lebar, jadi jika lebar anda ialah 3000px, ketinggian anda akan sama. Anda ada pilihanJawapan akhir bergantung pada beberapa penjelasan daripada anda. Saya bertanya kepada anda dalam ulasan mengenai soalan ini. Tetapi saya akan memberikan jawapan umum.
Saya akan menerangkan secara ringkas apa yang dilakukan dalam contoh di bawah.
Saya mencipta
.chessboard-wrapper
,其中有一个。
根据需要进行缩放,并具有
aspect-ratio: 1;
..chessboard
本身具有position:absolute;
Dan akan datang dalam saiz ayah.