So positionieren Sie die Website-Box rechts
P粉953231781
2023-08-14 19:16:04
<p>Ich habe hier ein Problem. Ich versuche, ein Feld auf der rechten Seite der Website zu platzieren, weiß aber nicht, warum es nicht funktioniert. Ich habe es mit <code>justify-content:flex- versucht. end;< /code> Richten Sie das Feld am „Ende“ der Seite aus und fügen Sie dann <code>padding-right</code> zu <code>200px</code> hinzu, aber leider funktioniert das nicht . Für jede Erklärungshilfe wären wir sehr dankbar.</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">* {
Rand: 0;
Polsterung: 0;
Boxgröße: border-box;
}
.container {
Breite: 100 %;
Höhe: 50 Vh;
Hintergrundfarbe: #1f2937;
Position: statisch;
Anzeige: Flex;
Flexrichtung: Spalte;
rechtfertigen-Inhalt: Mitte;
}
.Fusszeile {
Position: absolut;
unten: 0px;
Breite: 100 %;
Höhe: 10vh;
Hintergrundfarbe: #1f2937;
Farbe weiß;
Textausrichtung: Mitte;
Anzeige: Flex;
rechtfertigen-Inhalt: Mitte;
align-items: center;
}
.logo {
Schriftgröße: 24px;
Schriftfamilie: „Times New Roman“, Times, Serif;
Farbe weiß;
rechtfertigen-Inhalt: Leerzeichen-zwischen;
Polsterung oben: 15px;
Schriftfamilie: „Gill Sans“, „Gill Sans MT“, Calibri, „Trebuchet MS“, serifenlos;
padding-left: 200px;
Position: absolut;
oben: 0;
}
.navbar {
Farbe weiß;
Schriftgröße: 18px;
Position: fest;
Breite: 85 %;
oben: 0;
rechts: 0;
Rand: automatisch;
Anzeige: Flex;
align-items: center;
rechtfertigen-Inhalt: Flex-Ende;
Flexrichtung: Reihe;
Polsterung oben: 15px;
padding-right: 200px;
}
.navbar ul li {
Listenstil: keiner;
Anzeige: Inline-Block;
Rand: 0 20px;
Textdekoration: keine;
}
.Text 1 {
Position: relativ;
Farbe weiß;
padding-left: 200px;
Schriftgröße: 48px;
Schriftdicke: fett;
Breite: 720px;
}
.text2{
Farbe weiß;
Schriftgröße: 18px;
padding-left: 200px;
Breite: 520px;
}
.text3{
Textausrichtung: Mitte;
Anzeige:flex;
align-items:center; /*vertikale Mitte*/
justify-content:right; /*horizontale Mitte*/
Breite: 500px;
Höhe:350px;
Hintergrundfarbe: grau;
}
</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link href="style.css" rel="stylesheet">
</head>
<Körper>
<div class="container">
<div class="logo">
<h2>Header-Logo</h2>
</div>
<div class="navbar">
<ul>
<li><a href="index.html">Header-Link eins</a></li>
<li><a href="index.html">Header-Link zwei</a></li>
<li><a href="index.html">Header-Link drei</a></li>
</ul>
</div>
<div class="text1">
<h2>Diese Website ist großartig</h2>
</div>
<div class="text2">Diese Website enthält Untertext, der hier unter dem Haupttitel steht. Die Schriftart ist kleiner und die Farbe hat einen geringeren Kontrast.</div>
<div class="text3">dies ist ein Platzhalter für ein Bild</div>
</div>
<div class="footer">
Copyright © Das Odin-Projekt 2023
</div>
</body>
</html></pre>
<p><br /></p>
<p>Ich habe versucht, es mit justify-content:flex-end auszurichten, aber ich bin am Ende meines Wissens. Um ehrlich zu sein, wäre eine Erklärung meines Problems sehr hilfreich, ich habe nur den notwendigen CSS-Code und den gesamten HTML-Code eingefügt Datei . Vielen Dank im Voraus für all Ihre Hilfe! </p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
首先，你使用了flex属性，尽管你还没有设置display:flex;
其次，要使一个div向右移动（例如box）：（根据需要进行缩进）
.container{ display:flex; align-items:center; /*垂直居中*/ justify-content:right; /*水平居中*/ }``` #text{ display:block; }