Dieser Artikel demonstriert die richtige Ausrichtung eines Div anhand praktischer Beispiele mithilfe von CSS.
- Wie richtet man ein Div mithilfe von CSS rechts aus?
- Verwendung der Eigenschaft „float“.
- Verwendung der „richtigen“ Eigenschaft
- Verwenden von Flex-Layout
- Verwenden des Rasterlayouts
Wie richtet man ein Div mithilfe von CSS rechts aus?
Der Entwickler kann jedes Div-Element oder Bild rechts ausrichten, um die Website ansprechender zu gestalten. Aufgrund ihrer hohen Flexibilität können div-Elemente auf verschiedene Arten auf der Webseite verwendet werden, z. B. zum Definieren von Seitenabschnitten, zum Erstellen von Spalten und zum Umschließen von zusammengehörigen Inhaltssätzen.
Befolgen Sie die folgenden Methoden, um das Div rechtsbündig auszurichten:
Methode 1: Verwenden der Eigenschaft „float“.
Erstellen Sie in der HTML-Datei ein Div und weisen Sie ihm die Klasse „ zu. nach rechts ausrichten “. Diese Klasse und dieses Div werden in diesem Artikel verwendet.
< div Klasse = „nach rechts ausrichten“ >
< P > Das ist etwas Inhalt. < / P >
< / div >
Wählen Sie nun diese Div-Klasse aus. nach rechts ausrichten ” und weisen Sie die CSS-Eigenschaften zu. Diese Eigenschaften werden zur besseren Visualisierung genutzt:
.nach rechts ausrichten {
schweben rechts;
Polsterung: 10px;
Hintergrund- Farbe : hotpink;
}
Im obigen Code ist das „ schweben ”-Eigenschaft wird auf die rechte Seite gesetzt. Es schwebt oder verschiebt das Div auf der Webseite in die richtige Richtung. Die Eigenschaften „padding“ und „background-color“ sind auf „ 10px ' Und ' Hotpink ' bzw.
Nach dem Kompilieren des obigen Codeausschnitts sieht die Webseite folgendermaßen aus:
Die obige Ausgabe bestätigt, dass sich das Div in die richtige Richtung bewegt.
Methode 2: Verwendung der „richtigen“ Eigenschaft
Wählen Sie im CSS die div-Klasse aus und legen Sie das „ Rechts ”-Eigenschaft auf 0. Es stellt sicher, dass der Abstand des ausgewählten Div von der rechten Seite gleich Null ist. Stellen Sie dann „ Position „Eigenschaft zu“ absolut ” um die Div-Position festzulegen. Wenden Sie am Ende einige Stileigenschaften zur besseren Visualisierung an:
.nach rechts ausrichten{
Rechts: 0 ;
Position: absolut;
Polsterung: 10px;
Hintergrund- Farbe : mittelviolett;
}
Nach der Ausführung des Codes sieht die Webseite folgendermaßen aus:
Die Ausgabe zeigt, dass das Div jetzt rechtsbündig ist.
Methode 3: Flex-Layout verwenden
Flex ist die effizienteste Methode und behält das Layout bei der Größenänderung des Fensters bei. Das Div kann mithilfe von CSS rechtsbündig ausgerichtet werden. Flex-Layout ' Eigenschaften. Das Flex-Layout enthält viele Eigenschaften für unterschiedliche Zwecke.
Erstellen Sie in der HTML-Datei ein übergeordnetes Div und darin zwei Geschwister-Divs. Weisen Sie außerdem jedem Div eine eindeutige Klasse zu:
< div Klasse = „nach rechts ausrichten“ >< div Klasse = 'linksbündig' >
< P >Das ist noch mehr Inhalt .< / P >
< / div >
< div Klasse = „rechtsbündig“ >
< h1 >Hallo von Linuxhint < / h1 >
< / div >
< / div >
Jetzt im „
Anzeige: Flex;
rechtfertigen- Inhalt : Leerzeichen dazwischen;
}
.rechtsbündig {
align-self: Flex-Ende;
Polsterung: 10px;
Hintergrund- Farbe : mittelviolett;
}
Im obigen Code,
- Zuweisen „ biegen ” und „space-between“-Werte zum „ Anzeige ' Und ' Rechtfertigungsinhalt ” Eigenschaften bzw. Diese Eigenschaften machen das Div zu einem Flex und sorgen für einen gleichen Abstand zwischen den untergeordneten Divs.
- Der ' align-self Die Eigenschaft ist auf „ gesetzt. Flex-Ende “, wodurch es an der rechten Seite des Containers ausgerichtet wird.
Nach der Ausführung des obigen Codes sieht die Webseite folgendermaßen aus:
Die Ausgabe zeigt, dass das Div mithilfe des Flex-Layouts rechtsbündig ist.
Methode 4: Verwenden des Rasterlayouts
Das Rasterlayout kann auch verwendet werden, um die Div rechtsbündig auszurichten. Die HTML-Codestruktur bleibt gleich:
.nach rechts ausrichten {Anzeige: Raster;
Rastervorlagenspalten: wiederholen ( 2 , 1fr ) ;
}
.rechtsbündig {
Gitterspalte- Start : 2 ;
Polsterung: 10px;
Hintergrund- Farbe : blaugrün;
}
Die Beschreibung des Codes finden Sie unten:
- Wählen Sie zunächst die übergeordnete div-Klasse „ .nach rechts ausrichten “ und stellen Sie „ Anzeige „Eigenschaft zu“ Netz “.
- Erstellen Sie dann zwei gleich große Spalten mit „ Rastervorlagenspalten ' einstellen ' wiederholen(2, 1fr) “.
- Wählen Sie am Ende die untergeordnete Div-Klasse „ .rechtsbündig “ und stellen Sie „ Rasterspaltenstart ”-Eigenschaft auf 2. Diese Eigenschaft beginnt das Element in der zweiten Spalte, d. h. auf der rechten Seite.
Nach der Ausführung des obigen Codes sieht die Webseite folgendermaßen aus:
Die Ausgabe zeigt, dass das Div jetzt mit dem Befehl „ rechtsbündig ausgerichtet ist. Netz ”Layout-Eigenschaften.
Abschluss
Um das Div in die richtige Richtung auszurichten, verwenden Sie „ schweben “, „ Rechts “, „ Flex-Layout ', Und ' Gitterstruktur ' Eigenschaften. Der ' schweben Die Eigenschaft wird nach rechts gesetzt, indem der Wert zugewiesen wird. 0px “. Für die „ biegen ”-Eigenschaft, stellen Sie die Anzeige auf Flex ein und verwenden Sie die „ align-self „Eigenschaft zu“ Flex-Ende “. Erstellen Sie mithilfe der Grid-Eigenschaft zwei Spalten gleicher Größe und lassen Sie das untergeordnete Div in der zweiten Spalte beginnen.