Text neben einem Bild in HTML platzieren

1. Verwenden Sie die CSS-Eigenschaft float, um den Text in HTML neben einem Bild zu platzieren
2. Verwenden Sie display: inline-block und vertical-align: top, um den Text neben einem Bild in HTML zu platzieren

In diesem Artikel wird erläutert, wie Sie mithilfe von HTML und CSS Text neben Bildern platzieren können.

Verwenden Sie die CSS-Eigenschaft float, um den Text in HTML neben einem Bild zu platzieren

Wir können die CSS-Eigenschaft float verwenden, um zu definieren, wie ein Element schweben kann. Ein Element kann nach rechts oder links schweben. Einige andere Optionen sind none, was bedeutet, dass das Element nicht schweben wird und inherit das Verhalten seines Elternteils zeigt. Mit der Eigenschaft float legen wir die Positionierung und Formatierung eines Elements fest. Wir können die Eigenschaft auch verwenden, um einen Text neben einem Bild zu platzieren.

Wir können den folgenden Stil leicht erreichen, indem wir sowohl Bild- als auch Textinhalte mit einem div umschließen. Der HTML-Code sollte wie folgt strukturiert sein.

<div>
    <div>
        <img src="url" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

Nachdem der HTML-Code nun strukturiert ist, können wir unser CSS als inline, intern oder extern hinzufügen. In diesem Beispiel implementieren wir die Stile mithilfe von Inline-CSS. Setzen Sie zunächst die Eigenschaft float auf left für das div, das das Bild umschließt. Verwenden Sie als Bildquelle die URL https://loremflickr.com/320/240. Als nächstes schreiben Sie einen beliebigen Text Ihrer Wahl und umschließen ihn mit einem weiteren div.

Code-Beispiel:

<div>
    <div style="float: left">
        <img src="https://loremflickr.com/320/240" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

Hier wird dem Wrapper des Bildes die Eigenschaft float: left gegeben. Die Eigenschaft float: left platziert das Bild links und ein weiterer Wrapper, der den Textinhalt umschließt, wird direkt neben dem Bild platziert. Auf diese Weise können wir die CSS-Eigenschaft float verwenden, um einen Text neben einem Bild zu platzieren.

Verwenden Sie display: inline-block und vertical-align: top, um den Text neben einem Bild in HTML zu platzieren

Wir können die Eigenschaften display und vertical-align verwenden, um in HTML einen Text neben einem Bild zu platzieren. Die Eigenschaft display definiert, wie ein Element in HTML angezeigt wird. Wir können die Anzeigeeigenschaft eines Elements als inline, inline-block, block usw. festlegen. Wenn wir display zu inline-block zuweisen, wird das Element zu einem Inline-Element, aber wir können es trotzdem Legen Sie die Eigenschaften height und width fest. Auf diese Weise können wir den Text neben einem Bild platzieren. Die Eigenschaft vertikal-align definiert die vertikale Ausrichtung eines Elements. Wenn wir den Wert top verwenden, wird das Element am oberen Rand des höchsten Elements in der Zeile ausgerichtet.

Hier können wir unseren Code wieder wie folgt strukturieren.

<div>
    <img src="" alt="img"/>
</div>
<div>
    <p>
        Text Here,
    </p>
</div>

Setzen Sie beispielsweise die Eigenschaft display auf inline-block und die Eigenschaft vertical-align auf top für den Image-Wrapper div. Was den Wrapper betrifft, setzt div des Textes die Eigenschaft display auf inline-block.

Code-Beispiel:

<div style="display:inline-block;vertical-align:top;">
    <img src="https://loremflickr.com/320/240" alt="img"/>
</div>
<div style="display:inline-block;">
    <p>
    Here goes the text content.
    </p>
</div>

Hier setzt die Eigenschaft display: inline-block die Eigenschaft des Wrappers, der das Bild umschließt, auf eine Inline-Block-Eigenschaft. Die Option inline-block fügt neben dem Element keinen Zeilenumbruch ein. Daher werden die Elemente nebeneinander ausgerichtet. Wir umschließen den Text-Wrapper auch wieder mit der Eigenschaft display: inline-block. Ähnlich wie beim vorherigen Wrapper wird der Textinhalt direkt neben dem Bild platziert.