Le chemin de la ballade frontale - Question 144 - disposition à deux colonnes - positionnement

Une grande ballade. 2022-07-24 01:18:03 阅读数:27

lecheminlaballadefrontale

Préface

Je suis une ballade. J'ai un frère Classement au sommetcTableau général19 Appelez la petite Ballade de front end J'ai passé trois ans à le créer Maintenant je vais passer cinq ans au - dessus de lui Aujourd'hui, c'est un autre jour près des frères, la vie est in évitablement rude C'est pas grave de recommencer à zéro La volonté des ballades est éternelle C'est facile d'abandonner Mais ça doit être cool d'insister. Ce sujet provient de cattle.com Wechat public front end ballade

Titre

La disposition à deux colonnes avec positionnement absolu semble rigide,Parce que la boîte mère doit d'abord définir les propriétés de localisation et que la hauteur de la boîte mère ne peut pas être écartée par la boîte Enfant,Si la hauteur de la Sous - boîte est adaptative,Donc la hauteur de la boîte mère ne peut pas être déterminée, donc le réglage,Mais l'avantage est que le réglage des propriétés est plus intuitif que le flotteur.
Maintenant, nommez la classe"container"La boîte mère de"position: relative"Propriétés,Pour s'assurer que le positionnement absolu de la Sous - boîte n'est pas basé surhtmlPositionnement des éléments.Continuer à nommer la classe"left"La boîte de"position: absolute"、"left: 0"Et"width: 100px"Trois attributs,Positionner la boîte à l'extrême gauche de la boîte mère et donner de la largeur,Mais la hauteur est adaptée au contenu.Enfin, nommez la classe"right"La boîte de"position: absolute"、"left: 100px"Et"right: 0px",Parce que la boîte n'a pas une largeur donnée,Paramètres"left"Et"right" Les propriétés de positionnement maintiennent la zone de contenu dans cette plage , L'adaptation est également réalisée .
Terminer les étapes décrites ci - dessus pour réussir le test , Passez à la section suivante .

Code de base

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positionnement</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position:relative;
}
.left {
border: 1px solid black;
position:absolute;
left:0;
width:100px;
}
.right {
border: 1px solid black;
position:absolute;
left:100px;
right:0;
}
</style>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>

Copyright:Cet article est[Une grande ballade.]Établi,Veuillez apporter le lien original pour réimprimer,remercier。 https://fra.fheadline.com/2022/205/202207240117217035.html