简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment positionner la boîte du site Web à droite
P粉953231781
P粉953231781 2023-08-14 19:16:04
0
1
603
<p>J'ai un problème ici, j'essaie de mettre une case sur le côté droit du site Web mais je ne sais pas pourquoi cela ne fonctionne pas, j'ai essayé d'utiliser <code>justify-content: flex- end;< /code> Alignez la case sur la "fin" de la page, puis ajoutez <code>padding-right</code> à <code>200px</code>, mais hélas, cela ne fonctionne pas. . Toute aide avec explication serait grandement appréciée.</p> <p><br /></p> <pre class="brush:css;toolbar:false;">* { marge : 0 ; remplissage : 0 ; dimensionnement de la boîte : bordure-boîte ; } .récipient { largeur : 100 % ; hauteur : 50vh ; couleur d'arrière-plan : #1f2937 ; position : statique ; affichage : flexible ; direction flexible : colonne ; justifier-contenu : centre ; } .bas de page { position : absolue ; en bas : 0px ; largeur : 100 % ; hauteur : 10vh ; couleur d'arrière-plan : #1f2937 ; Couleur blanche; alignement du texte : centre ; affichage : flexible ; justifier-contenu : centre ; aligner les éléments : centre ; } .logo { taille de police : 24 px ; famille de polices : 'Times New Roman', Times, serif ; Couleur blanche; justifier-contenu : espace entre les deux ; rembourrage supérieur : 15 px ; famille de polices : 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ; remplissage à gauche : 200 px ; position : absolue ; haut : 0 ; } .barre de navigation { Couleur blanche; taille de police : 18 px ; poste : fixe ; largeur : 85 % ; haut : 0 ; à droite : 0 ; marge : auto ; affichage : flexible ; aligner les éléments : centre ; justifier-contenu : flex-end ; direction flexible : rangée ; rembourrage supérieur : 15 px ; remplissage à droite : 200 px ; } .navbar ul li { style de liste : aucun ; affichage : bloc en ligne ; marge : 0 20px ; décoration de texte : aucune ; } .texte 1 { position : relative ; Couleur blanche; remplissage à gauche : 200 px ; taille de police : 48 px ; poids de la police : gras ; largeur : 720 px ; } .texte2{ Couleur blanche; taille de police : 18 px ; remplissage à gauche : 200 px ; largeur : 520 px ; } .text3{ alignement du texte : centre ; affichage:flex; align-items:center; /*centre vertical*/ justifier-contenu : droit ; /*centre horizontal*/ largeur : 500 px ; hauteur : 350 px ; couleur de fond : gris ; } ≪/pré> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html lang="fr"> <tête> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titre>Site Web</titre> <link href="style.css" rel="stylesheet"> ≪/tête> <corps> <div class="conteneur"> <div class="logo"> <h2>Logo d'en-tête</h2> </div> <div class="navbar"> <ul> <li><a href="index.html">lien d'en-tête un</a></li> <li><a href="index.html">lien d'en-tête deux</a></li> <li><a href="index.html">lien d'en-tête trois</a></li> </ul> </div> <div class="text1"> <h2>Ce site Web est génial</h2> </div> <div class="text2">Ce site Web contient un sous-texte qui se trouve ici sous le titre principal. Il s'agit d'une police plus petite et la couleur est moins contrastée</div> <div class="text3"> ceci est un espace réservé pour une image</div> </div> <div class="pied de page"> Copyright et copie ; Le projet Odin 2023 </div> </corps> </html></pre> <p><br /></p> <p>J'ai essayé d'utiliser justifier-content:flex-end pour l'aligner mais je suis à bout de nerfs, pour être honnête, une explication de mon problème serait très utile, j'ai uniquement inclus le code CSS nécessaire et l'intégralité du HTML déposer . Merci d'avance pour toute votre aide ! </p>
P粉953231781
P粉953231781

répondre à tous(1)
P粉373990857
P粉3739908572023-08-15 18:21:28 1 plancher

Tout d’abord, vous utilisez la propriété flex, même si vous n’avez pas défini display:flex;

Deuxièmement, pour déplacer un div vers la droite (par exemple, une case) : (indenter selon les besoins) 

.container{
display:flex;
align-items:center; /*垂直居中*/
justify-content:right; /*水平居中*/
}```
#text{
display:block;
}
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！