Verwenden Sie CSS Linksbündig, um ein Website-Bild links vom Text zu schweben

click fraud protection

Elemente auf Blockebene auf einer Webseite erscheinen in sequentieller Reihenfolge. Um das Erscheinungsbild oder die Nützlichkeit der Seite zu verbessern, können Sie diese Reihenfolge ändern, indem Sie Blöcke, einschließlich Bilder, umschließen, sodass Text fließt um Bilder herum.

Im Webdesign wird dieser Effekt als Floating the Image bezeichnet. Dies wird erreicht mit dem CSS-Eigenschaftschweben, wodurch Text um das linksbündig ausgerichtete Bild rechts herum (oder um ein rechtsbündig ausgerichtetes Bild links herum) fließen kann.

Webentwicklerin, die am Computer arbeitet
Maskot/Getty Images

Beginnen Sie mit HTML

In diesem Beispiel wird am Anfang eines Absatzes ein Bild hinzugefügt (vor dem Text, aber nach der Eröffnung

Etikett). Hier ist das anfängliche HTML-Markup:

Der Text des Absatzes geht hier. In diesem Beispiel haben wir ein Bild eines Kopfschussfotos, daher könnte dieser Text die Person auf dem Kopfschuss beschreiben.


Standardmäßig wird die Seite mit dem Bild über dem Text angezeigt, da Bilder in HTML Elemente auf Blockebene sind. Das bedeutet, dass der Browser standardmäßig Zeilenumbrüche vor und nach dem Bildelement anzeigt. Um dieses Standard-Look mit CSS zu ändern, fügen Sie einen Klassenwert hinzu (

instagram viewer
links) an das Bildelement, um als Haken zu dienen, an den Eigenschaften angehängt werden können.

Der Text des Absatzes geht hier. In diesem Beispiel haben wir ein Bild eines Kopfschussfotos, daher könnte dieser Text die Person auf dem Kopfschuss beschreiben.


Beachten Sie, dass diese Klasse selbst nichts tut. CSS wird den gewünschten Stil erreichen.

CSS-Stile hinzufügen

Füge diese Regel zum der Website hinzu Stylesheet:

.links {
Schwimmer: links;
Auffüllen: 0 20px 20px 0;
}

Dieser Stil schwimmt alles mit der Klasse links links auf der Seite und fügt ein wenig hinzu Polsterung rechts und unten im Bild, damit der Text nicht direkt daran anstößt.

In einem Browser wäre das Bild jetzt linksbündig; der Text würde rechts mit Leerzeichen zwischen den beiden erscheinen.

Der Klassenwert .links hier verwendet wird, ist willkürlich. Sie können es beliebig nennen, da es von sich aus nichts tut. Sie sollten jedoch auch nicht, dass sich ein Wert, den Sie im CSS ändern, auch im HTML widerspiegeln.

Andere Möglichkeiten, diese Stile zu erreichen

Sie können den Klassenwert auch aus dem Bild entfernen und es mit CSS gestalten, indem Sie einen spezifischeren Selektor schreiben. Im folgenden Beispiel befindet sich das Bild innerhalb einer Division mit a Hauptinhalt Klasse Wert.


Der Text des Absatzes geht hier. In diesem Beispiel haben wir ein Bild eines Kopfschussfotos, daher könnte dieser Text die Person auf dem Kopfschuss beschreiben.


Um dieses Bild zu stylen, schreiben Sie dieses CSS:

.main-content img { 
Schwimmer: links;
Auffüllen: 0 20px 20px 0;
}

In diesem Szenario wird das Bild linksbündig ausgerichtet, wobei der Text wie zuvor schwebt, jedoch ohne den zusätzlichen Klassenwert im Markup. Wenn Sie dies in großem Maßstab tun, können Sie eine kleinere HTML-Datei erstellen, die einfacher zu verwalten ist und die Leistung verbessern kann.

Vermeiden Sie Inline-Stile

Schließlich könntest du verwenden Inline-Stile:

Der Text des Absatzes geht hier. In diesem Beispiel haben wir ein Bild eines Kopfschussfotos, daher könnte dieser Text die Person auf dem Kopfschuss beschreiben.


Dies ist jedoch nicht ratsam, da es den Stil eines Elements mit seinem strukturellen Markup kombiniert. Best Practices schreiben vor, dass Stil und Struktur einer Seite getrennt bleiben. Diese Trennung ist besonders hilfreich, wenn Sie das Layout der Seite ändern und nach verschiedenen Bildschirmgrößen und Geräten mit einer responsiven Website suchen müssen.

Die Verflechtung des Stils der Seite mit dem HTML macht Erstellen von Medienabfragen die Anpassung Ihrer Website an verschiedene Bildschirme viel schwieriger.

instagram story viewer