Wie Bilder in Übereinstimmung mit Text in CSS zu haben

<p> -Tags sind Elemente auf Blockebene. Verwenden Sie ein Inline-Element wie <span> :

Alternativ können Sie, wenn Sie CSS verwenden können, beide Elemente als inline-block definieren:

Beispiel 1 jsFiddle

Beispiel 2 jsFiddle

BEARBEITEN: Es könnte auch sinnvoll sein, wenn semantisch <address> statt <span> verwendet. Zum Beispiel:

Da <address> ebenfalls ein Element auf Blockebene ist, müssen Sie das korrekte CSS wie folgt einfügen:

Endgültiges jsFiddle-Beispiel

.content img, .content p { float:left } float: links / rechts - je nachdem, wo Sie es haben möchten

Am einfachsten ist es, <span> anstelle von <p> zu verwenden. <p> erstellt einen neuen Absatz, der "unabhängig" beendet wird.

Sehen Sie sich dieses Arbeitsbeispiel hier an.

Wenn Sie neue Tags für Fußzeile und Adresse verwenden möchten, ist dies mein Beispiel :

Die Alternative zu Bildern wurde hinzugefügt, um bei Behinderungen und Standards zu helfen.

Ich finde viel Zeit, die ich brauche, um die Position des Bildes an den Text anzupassen. Sie können dies tun, indem Sie den Text und das Bild in einem div mit relativer Position umschließen und dann die absolute Position auf dem Bild zuweisen. Dann können Sie den oberen Rand und den linken Rand hinzufügen, um die Position relativ zum Text anzupassen. Ссылка

HTML:

CSS: