Comment positionner la boîte du site Web à droite
P粉953231781
2023-08-14 19:16:04
<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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }