Maison > interface Web > tutoriel CSS > le corps du texte

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)

高洛峰
Libérer: 2017-03-17 14:03:28
original
1603 Les gens l'ont consulté

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal