Utilisez CSS pour obtenir une largeur fixe sur le côté gauche (droit) et une introduction à la largeur adaptative sur le côté droit (gauche)

C'est une vieille histoire, CSS n'est pas figé pour s'adapter à la mise en page Qu'il s'agisse d'un entretien ou dans le travail quotidien, ce formulaire de mise en page a été utilisé tout le temps, c'est très courant, donc aujourd'hui je vais le retirer. et en discuter, tant pour moi. Un mémo de rangement est aussi une référence pour l'apprentissage et la consolidation, sachant que tout le monde le connaît, il faut quand même le mémoriser, sans autre raison que de poser des bases solides.

Il y a trop de choses à dire, il suffit d'aller au code et vous le comprendrez d'un coup d'œil. Peut-être que vous considérerez cela comme simple, mais j'aime écrire quelque chose. . . . . . En tant que débutant, vous devez étudier dur depuis les bases.

Il existe de nombreuses méthodes. Si vous avez de nouvelles méthodes à ajouter, merci ! !

1. Mise en page fixe à gauche et mise en page adaptative à droite

*{ marge : 0 ; remplissage:0}

.whole{ largeur:100%;}

p class="
gauche"> gauche 300px

                                                                                         
< /p>
Méthode 1 : Utilisez

float

float sur le côté gauche, donnez une largeur fixe, et la distance de la marge gauche sur le côté droit == Largeur du calque gauche code css :

:red}

　.right{ margin-left
:300px; background:green; } Méthode 2 : GauchePositionnement absolu
absolu, le code de droite n'a pas changé ou la distance de la marge gauche à droite == la largeur du calque gauche ;

code css :

　.left{

position : absolu ; gauche : 0; vert ; > Méthode 3 (pour préférence personnelle) : Utiliser le positionnement absolu sur les côtés gauche et droit, définition relative du parent (n'affecte pas, il est recommandé d'ajouter une définition relative, Éviter les chevauchements)

　

code css :

　.left{ position : absolue ; gauche : 0;

　

.right{ position : absolue ; gauche : 300 px ; arrière-plan : vert >2. Non corrigé, la bonne mise en page est corrigée ----- la méthode est la même, la position est juste modifiée

                                                                                                                                                                                                  ;/p>

Méthode 1. Utilisez pour flotter à gauche sur le côté gauche,

marge droite == la valeur négative de la largeur du calque de droite (car vous Il est laissé ouvert, avec une bonne distance par rapport à la droite)

,

Celui de droite a une largeur flottante et fixe

 .left{ float : gauche ; largeur : 100 % ; marge-droite : -300px ; arrière-plan : rouge }
　.right{ float : droite ; ;fond : bleu;}

Méthode 2. Utiliser le positionnement absolu sur les côtés gauche et droit de et la définition relative du parent (n'affecte pas, recommandé Ajouter une définition relative pour éviter les chevauchements)  

.left{ position : absolue ; gauche : 0 ; largeur : 100 % ; arrière-plan : rouge ;>
　.right{ position : gauche : 200 px ; largeur : 200 px; Méthode 3 ,

La méthode de dégagement des flotteurs est expliquée d'un seul trait 🎜> 1.

<.>

Séparément Définir un calque

clear">

clair : les deux> 2 . Méthode pseudo-classe : after (utilisée sur la couche de mise en page de la classe parent) - couramment utilisée

🎜>

.father::after,.father::before{ clear: les deux; contenu: "" affichage: table;}

　

　　

　　flotrgt">

 

3. L'élément parent définit le débordement sur caché ou automatique, une hauteur fixe est également possible - déconseillé

.père {débordement :caché; largeur: 100%; } //débordement:auto hauteur:300px;

L'écriture est relativement simple, avec très peu d'expressions écrites. C'est un code. Peu importe le nombre d'idées dont vous parlez, ne laissez pas le code direct fonctionner. Après l'avoir utilisé, vous en comprendrez le sens, bonne chance. .

Supplémentaire -- Interdire l'écran horizontal

La navigation est meilleure en mode portrait !

.orientation-alert{
arrière-plan : rgba(0,0,0,.85);
position : corrigée ;
gauche : 0;
haut: 0;
hauteur : 100%;
largeur : 100%;
z-index : 1000000;
couleur : #FFF;
affichage : aucun;
}
.orientation-alert p{
position : absolue;
largeur : 100 %;
haut : 50%;
taille de police : 20px;
hauteur de ligne : 30px;
marge supérieure : -15px;
text-align: center;
}
@media screen et (orientation : paysage){
.orientation-alert{
display: block;
}
}
écran @media et (orientation : portrait){
.orientation-alert{
affichage : aucun;
}
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!