- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
Pertimbangkan kod html saya berikut
<html>
<head>
</head>
<body>
<div class="wrapper">
<section class="first">第一内容</div>
<section class="second">第二内容</div>
<section class="third">第三内容</div>
</div>
</body>
</html>
Apa yang saya perlukan ialah memaparkan kandungan ketiga di atas paparan pelayar dengan menukar nama kelas dan bukannya menukar kedudukan dalam html Pada masa yang sama, perubahan harus kekal responsif.
Kod html saya adalah seperti berikut
<div class="wrapper">
<section class="third">第一内容</section>
<section class="second">第二内容</section>
<section class="first">第三内容</section>
</div>
P粉2074830872023-09-09 11:07:58
Saya akan menggunakan sistem grid dan pesanan. Kemudian gunakan js untuk menukar nombor urutan supaya div ketiga menjadi yang pertama. Adakah anda fikir ini mungkin penyelesaian untuk anda?
Anda boleh mendapatkan maklumat lanjut di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/order
.wrapper{
display: grid;
}
.first{
order: 1;
}
.second{
order: 2;
}
.third{
order: 3;
}
Kemudian anda boleh menggunakan JS untuk menukar nombor urutan
P粉2041364282023-09-09 09:43:19
.wrapper{
display: flex;
flex-flow: column;
}
.first{
order: 3;
}
.second{
order: 2;
}
.third{
order: 1;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<section class="first">First Content</section>
<section class="second">Second Content</section>
<section class="third">ThirdContent</section>
</div>
</body>
</html>