Grafiken und Bilder machen Webseiten benutzerfreundlicher. Darüber hinaus ziehen Bilder die Aufmerksamkeit des Benutzers und helfen beim Styling oder Design der Anwendung. Die Anwendung mit mehr Bildern erhält mehr Ansichten. Darüber hinaus gibt es verschiedene Möglichkeiten, die Bildpositionen in CSS anzupassen, z.

In der Beschreibung werden verschiedene Methoden für Bilder und Text nebeneinander in HTML diskutiert.

Voraussetzung: Erstellen Sie eine HTML -Datei

Befolgen Sie die folgenden Anweisungen zum Erstellen einer HTML-Datei, bevor Sie zum Hauptthema des Beitrags wechseln:

• Füge hinzu ein ""Element und nennen seine Klasse"Linux-Details”.
• Fügen Sie zwei „” untergeordnete Elemente in das Haupt „“ für Bild bzw. Text hinzu. Zuweisen Sie die “"Tag eine Klasse"Linux-Img" und das "

  "Tag mit der Klasse"Text”.

• Passen Sie die Schriftgröße an “

  Tag, indem Sie die "verwenden"Schriftgröße" Eigentum.

• Fügen Sie einen Text in die “ein

  " Schild.

Html

LinuxHint

Qualitätsvideos, beste Artikel

Methode 1: So haben Sie Bild- und Text nebeneinander mit der Eigenschaft "Float"?

Das CSS “schwebenDie Eigenschaft wird verwendet, um die Position des Elements zu bestimmen, unabhängig davon. Ein schwebendes Element wird von den Elementen daneben umgeben sein.

Stil „Linux-Details“ -Klasse

Zuerst style the “Linux-DetailsKlasse, indem die folgenden Eigenschaften zugewiesen werden:

.Linux-Details
Breite: 80%;
Polsterung: 1%;

Der ".Linux-Details”Wird verwendet, um auf den erstellten Container zuzugreifen. Diese Klasse wird dann mit den unterbearbeiteten Eigenschaften angewendet:

• “Breite”Bestimmt die Breite des Elements.
• “Polsterung”Verteilt Raum um den Inhalt des Elements.

Stil „Linux-Img“ -Klasse

Das CSS “schwebenEigenschaft wird in die "hinzugefügt"Linux-ImgKlasse, um die Bildposition anzupassen:

.Linux-IMG
Höhe: 150px;
Breite: 150px;
Margin-Links: 30%;
float: links;

Hier:

• “Höhe”Passt die Höhe des Elements an.
• “links”Fügt der linken Seite des Elements etwas Platz hinzu.
• “schweben”Eigenschaft mit dem Wert“links”Schwebt das Bild links. Infolgedessen wird der Textinhalt danach danach platziert.

Ausgang

Methode 2: So haben Sie Bild- und Text nebeneinander mit der Eigenschaft "Grid"?

Das CSS “NetzDie Eigenschaft bietet eine einfachere Möglichkeit, ein Website -Layout zu entwerfen, das Zeilen und Spalten bereitstellt.

Stil „Linux-Details“ -Klasse

Jetzt die "Netz"Eigenschaft wird in die" platziert "Linux-Details" Klasse:

.Linux-Details
Anzeige: Grid;
Ausrichtung: Zentrum;
Grid-Template-Säulen: 1fr 1fr;
Säulenlücke: 5px;

Der "Linux-DetailsDie Klasse wird die folgenden Eigenschaften zugewiesen:

• “AnzeigeEigenschaft mit dem Wert zugewiesen als "Netz”Bietet ein Layout mit Zeilen und Spalten.
• “Ausrichtung"Mit dem Wert"Center”Platziert wird verwendet, um das Element in die Mitte zu platzieren.
• “Grid-Template-Säulen”Eigenschaft mit dem Wert“1fr 1fr”Liefert jeweils zwei Spalten eines Bruchs.
• “SäulenlückeEigenschaft fügt Platz zwischen den Spalten hinzu.

Stil „img“ Element

img
Max-Breite: 100%;
maximal hohe: 100%;

Der "Das Element wird die unten erwähnten Eigenschaften bereitgestellt:

• “maximale BreiteEigenschaft bestimmt die maximale Breite des Elements.
• “maximale Höhe”Definiert die maximale Höhe des Elements.

Ausgang

Methode 3: So haben Sie Bild- und Text nebeneinander mit der Eigenschaft "Flex"?

Das CSS “biegenDie Eigenschaft platziert die Elemente in einer Zeile (standardmäßig).

Stil „Linux-Details“ -Klasse

.Linux-Details
Anzeige: Flex;
Ausrichtung: Zentrum;
Justify-Content: Center;
Polsterung: 5%;

Hier ist die Erklärung der oben genannten Eigenschaften:

• “Anzeige”Eigenschaft mit dem Wert“biegen"Wird die" platzieren "Inhalte des Elements in einer Zeile.
• “Ausrichtung”Richtet die flexiblen Gegenstände vertikal aus.
• “Rechtfertigungsbekämpfung”Legt die Ausrichtung des flexiblen Elements horizontal fest.

Stil „Text“

.Text
Schriftgröße: 20px;
Padding-Links: 20px;

Der "TextDie Klasse wird durch die Verwendung der folgenden Eigenschaften gestaltet:

• “SchriftgrößeDie Eigenschaft legt die Größe der Schriftart fest.
• “Padding-Links”Fügt links im Text Platz hinzu.

Ausgang

Es ging darum, ein Bild und Text nebeneinander zu haben, indem Sie verschiedene Eigenschaften verwenden.

Abschluss

Mehrere Eigenschaften können verwendet werden, um ein Bild und Text nebeneinander auf einer Website zu platzieren. Die am häufigsten verwendeten Eigenschaften sind “schweben","Netz", Und "biegen”. Um dies zu tun, erstellen Sie eine “”Container. Fügen Sie zwei weitere "" Elemente für Bild und Text hinzu. Wenden Sie dann eine der genannten Eigenschaften auf das Haupt -Tag für die Bild- und Textpositionsanpassungen an. Dieser Blog hat verschiedene Eigenschaften für die Platzierung eines Bildes und Textes nebeneinander erläutert.