Zeichnen einer vertikalen Linie, um HTML-Text vom Bild zu trennen

HTML bietet keine so saubere Lösung für vertikale Linien wie für horizontale Linien - eine vertikale Entsprechung zu der

1

Richten Sie Ihr Bild in Ihrem Text ein und fügen Sie ein Attribut-Tag "style" hinzu. Der HTML-Code für Ihr Bild könnte beispielsweise wie folgt aussehen:

2

Definieren Sie den Rahmen innerhalb des Attributs "style". Wenn Sie beispielsweise möchten, dass ein Rahmen auf das gesamte Bild angewendet wird, würde das CSS folgendermaßen aussehen:

Dies ist eine Abkürzung für den Rahmen - der erste Wert legt die Breite des Rahmens fest, der zweite die Art des Rahmens und der dritte die Farbe. Umrandungen können durchgehend, gepunktet, gestrichelt oder doppelt sein. oder Sie können einen 3-D-Rand angeben, z. B. Nut, First, Einfügung oder Anfang.

Wenn Sie den Rand nur auf einer Seite anwenden möchten, um eine echte vertikale Linie zu erstellen, verwenden Sie "border-left" oder "border-right" anstelle von "border".

3.

Fügen Sie eine Auffüllung hinzu, um Platz zwischen Ihrem Bild und Text zu schaffen. Wenn der Rand 5 Pixel vom Bild entfernt sein soll, fügen Sie "padding: 5px;" hinzu. zu Ihrem Style-Tag. Sie können den Abstand nur auf einer Seite angeben, indem Sie beispielsweise "padding-left: 5px;" verwenden. Wenn Sie einen Abstand zwischen dem Rand und dem Text erstellen möchten, verwenden Sie einen Rand. Sie müssen außerdem Ihre Bild-URL für das "src" -Tag angeben. Wenn Sie alles zusammenstellen, könnte Ihr Code ungefähr so ​​aussehen:

4

Speichern und testen Sie Ihren HTML-Code, um zu bestätigen, dass der Rahmen wie gewünscht angezeigt wird.