- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
Considérez ce qui suit mon code html
<html>
<head>
</head>
<body>
<div class="wrapper">
<section class="first">第一内容</div>
<section class="second">第二内容</div>
<section class="third">第三内容</div>
</div>
</body>
</html>
Ce dont j'ai besoin, c'est d'afficher le troisième contenu en haut de la vue du navigateur en changeant le nom de la classe au lieu de changer la position dans le code HTML. Dans le même temps, les changements doivent rester réactifs.
Mon code html est le suivant
<div class="wrapper">
<section class="third">第一内容</section>
<section class="second">第二内容</section>
<section class="first">第三内容</section>
</div>
P粉2074830872023-09-09 11:07:58
J'utiliserai un système de grille et commanderai. Utilisez ensuite js pour modifier le numéro de séquence afin que le troisième div devienne le premier. Pensez-vous que cela pourrait être une solution pour vous ?
Vous pouvez trouver plus d'informations ici : https://developer.mozilla.org/en-US/docs/Web/CSS/order
.wrapper{
display: grid;
}
.first{
order: 1;
}
.second{
order: 2;
}
.third{
order: 3;
}
Ensuite, vous pouvez utiliser JS pour changer le numéro de séquence
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>