Ein Element auf Blockebene in einem HTML-Dokument (z. B. einer Webseite) wird in sequenzieller Reihenfolge angezeigt. Um die Reihenfolge zu ändern, um die Seite attraktiver zu gestalten oder um ihre Nützlichkeit zu verbessern, müssen Sie Blöcke umschließen, einschließlich Bilder, damit der Text der Seite um sie herum fließt.
Im Web wird dieser Effekt als "Floating" des Bildes bezeichnet. Dieser Stil wird mit der CSS-Eigenschaft für "Float" erzielt. Mit dieser Eigenschaft kann Text um das linksbündige Bild auf der rechten Seite fließen. Oder um ein rechtsbündiges Bild auf der linken Seite.
Beginnen Sie mit HTML
Das erste, was Sie tun müssen, ist HTML, mit dem Sie arbeiten können. In unserem Beispiel schreiben wir einen Textabschnitt und fügen ein Bild am Anfang des Absatzes (vor dem Text, aber nach dem Öffnen) ein
Etikett). So sieht dieses HTML-Markup aus:
Der Text des Absatzes geht hier hin. In diesem Beispiel haben wir ein Bild eines Headshot-Fotos, daher würde sich dieser Text wahrscheinlich auf die Person beziehen, für die der Headshot bestimmt ist.
Standardmäßig wird unsere Webseite mit dem Bild über dem Text angezeigt, da Bilder Elemente auf Blockebene in HTML sind. Das bedeutet, dass der Browser standardmäßig vor und nach dem Bildelement Zeilenumbrüche anzeigt. Wir werden dieses Standardbild ändern, indem wir uns CSS zuwenden. Zuerst fügen wir jedoch unserem Bildelement einen Klassenwert hinzu. Diese Klasse dient als "Haken", das wir später in unserem CSS verwenden werden.
Der Text des Absatzes geht hier hin. In diesem Beispiel haben wir ein Bild eines Headshot-Fotos, daher würde sich dieser Text wahrscheinlich auf die Person beziehen, für die der Headshot bestimmt ist.
Beachten Sie, dass diese Klasse von "links" alleine nichts tut. Um unseren gewünschten Stil zu erreichen, müssen wir als Nächstes CSS verwenden.
CSS-Stile
Mit unserem HTML-Code (einschließlich unseres Klassenattributs "left") können wir uns jetzt CSS zuwenden. Wir würden unserem Stylesheet eine Regel hinzufügen, die das Bild schweben lassen würde, und daneben ein wenig Abstand hinzufügen, damit der Text, der das Bild letztendlich umgibt, nicht zu eng anliegt. Hier ist das CSS, das Sie schreiben können:
.left { Schwimmer: links; Polsterung: 0 20px 20px 0;}
Dieser Stil schwebt das Bild nach links und fügt (mit einer kurzen CSS-Abkürzung) rechts und unten im Bild ein wenig Abstand hinzu. Wenn Sie die Seite, die diesen HTML-Code enthält, in einem Browser überprüft haben, wird das Bild jetzt nach links ausgerichtet und der Text des Absatzes erscheint auf der rechten Seite mit einem angemessenen Abstand zwischen den beiden. Beachten Sie, dass der Klassenwert von "left", den wir verwendet haben, beliebig ist. Wir hätten es alles nennen können, weil der Begriff "links" nichts von sich aus tut. Welcher Begriff auch immer verwendet wird, muss im HTML-Klassenattribut ein Attribut enthalten, das mit einem tatsächlichen CSS-Stil arbeitet, der die visuellen Änderungen vorgibt, die Sie vornehmen möchten. Dieser Ansatz, dem image-Element ein Klassenattribut zu geben und dann einen allgemeinen CSS-Stil zu verwenden, der das Element schwimmt, ist nur eine Möglichkeit, um dieses "links ausgerichtete Bild" -Look zu erreichen. Sie können den Klassenwert auch vom CSS übernehmen und mit CSS gestalten, indem Sie einen spezifischeren Selektor schreiben. Betrachten wir zum Beispiel ein Beispiel, in dem sich dieses Bild innerhalb einer Division mit einem Klassenwert "main-content" befindet. Um dieses Bild zu stylen, können Sie dieses CSS schreiben: .main-content img { Schwimmer: links; Polsterung: 0 20px 20px 0;}
In diesem Szenario würde unser Bild nach links ausgerichtet sein, der Text würde wie zuvor um diesen herum verschoben, aber wir mussten unserer Markup keinen zusätzlichen Klassenwert hinzufügen. Auf diese Weise können Sie eine kleinere HTML-Datei erstellen, die einfacher zu verwalten ist und auch die Leistung verbessern kann. Schließlich können Sie die Stile sogar direkt in Ihr HTML-Markup einfügen:
Diese Methode wird als "Inline-Stile" bezeichnet. Dies ist nicht ratsam, da es den Stil eines Elements mit seiner strukturellen Markierung kombiniert. Web-Best Practices legen fest, dass Stil und Struktur einer Seite getrennt bleiben sollen. Diese Trennung ist besonders hilfreich, wenn Ihre Seite das Layout ändern und mit einer responsiven Website nach verschiedenen Bildschirmgrößen und Geräten suchen muss. Wenn Sie den Stil der Seite im HTML-Code verflochten haben, wird es viel schwieriger, Medienabfragen zu erstellen, die das Erscheinungsbild Ihrer Website für die verschiedenen Bildschirme anpassen. Alternative Möglichkeiten, um diese Stile zu erreichen
Der Text des Absatzes geht hier hin. In diesem Beispiel haben wir ein Bild eines Headshot-Fotos, daher würde sich dieser Text wahrscheinlich auf die Person beziehen, für die der Headshot bestimmt ist. Vermeiden Sie Inline-Styles
Der Text des Absatzes geht hier hin. In diesem Beispiel haben wir ein Bild eines Headshot-Fotos, daher würde sich dieser Text wahrscheinlich auf die Person beziehen, für die der Headshot bestimmt ist.
