Explication détaillée de la solution de mise en page HTML adaptative au milieu fixe à largeur gauche et droite

Cet article présente une explication détaillée de la solution de mise en page HTML adaptative html">à largeur fixe du milieu gauche et droite et la partage avec tout le monde, comme suit :

La structure HTML est la suivante

 <div class=box> <div class=left>gauche</div> <div class=right>droite</div> <div class=center>centre</div></div> //Faites d'abord attention ici les éléments flottants gauche et droit sont rendus avant que l'élément du milieu ne soit rendu. Une fois l'élément flottant, les éléments frères restants au niveau du bloc occuperont la largeur de l'élément parent <style> .box{ height:200px; } .left{ float:left:300px } .right{ float:right; ; largeur:300px; } </style>

La structure HTML est la suivante

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //Identique à la disposition flottante, restituez d'abord les éléments gauche et droit de manière à ce qu'ils soient positionnés aux extrémités gauche et droite de l'élément parent, et que les éléments du milieu restants occupent la largeur restante de l'élément parent. <style> .box{ position : relative ; } .left{ position : absolue ; largeur : 100 px gauche : 0 ; } .right{ position : absolue : 0 ; ; fond : rouge </style>

Mettre l'élément parent display:table et l'élément enfant display:table-cell le transformera en un bloc en ligne.

L'avantage de cette disposition est une bonne compatibilité.

 <div class=box> <div class=left> gauche </div> <div class=center> centre </div> <div class=right> droite </div></div><style> .box{ affichage : tableau ; largeur : 100 % ; } .left{ affichage : table-cellule ; largeur : 100 px ; 100 % ; fond : rouge ;</style>

Affichage des éléments parents : les éléments enfants flex seront tous disposés dans une rangée.

La largeur de flex:n dans l'élément enfant sera la largeur de l'élément parent/n

Par exemple, flex:1, la largeur est égale à la hauteur de l'élément parent.

L'inconvénient de la mise en page élastique est que sa compatibilité n'est pas élevée. Actuellement, le navigateur IE ne peut pas utiliser la mise en page élastique.

 <div class=box> <div class=left> gauche </div> <div class=center> centre </div> <div class=right> droite </div></div><style> .box{ affichage : flex; largeur : 100 % ; } .left{ largeur : 100px gauche : 0 ; } .right{ largeur :100px ;

Affichage de l'élément parent : grille ;

colonnes de modèle de grille : 100 px auto 100 px ;

Dans l'ordre, la largeur du premier élément enfant est de 100 px, le deuxième est adaptatif et le troisième est de 100 px ;

L'avantage de la disposition en grille est qu'elle est extrêmement simple et est directement déterminée par le style de l'élément parent. L'inconvénient est que sa compatibilité n'est pas élevée.

 <div class=box> <div class=left> gauche </div> <div class=center> centre </div> <div class=right> droite </div></div><style> .box{ affichage : grille ; grille-modèle-colonnes : 100px auto 100px ; largeur : 100 % ;

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.