HTML - Positionieren Sie ein Bild in eine neue Zeile

Habe ich eine Reihe von Absätzen. Jedes endet mit einer Abbildung, die verdeutlicht, das Thema wird ausführlich im Absatz.

Möchte ich die illustration auf einer neuen Zeile und nicht angezeigt, zusammen mit dem text, und ich habe Folgendes gefunden-Lösungen, mit seinen eigenen Problemen:

Setzen Sie das Bild in ein anderes <p> als der text zu der Abbildung.

<p>Some text here<p/>
<p><img src="myphoto"/></p>

Dieser scheint alle Probleme lösen, aber später musste ich schließen einige dieser Absätze in einem <ul> statt einer <p>. Das problem ist ich kann nicht schließen Sie die <p> tag für die Abbildung innerhalb einer <li> und keinen Sinn macht, legen Sie der Abbildung im inneren ein <li>.

<ul>
    <li>Some text</li>
    <p><img src="myphoto"/></p><!--Incorrect-->
    <li><img src="myphoto"/></li><!--Does not make sense-->
</ul>

Setzen die ilulstration innerhalb der gleichen <p> als der text. Dann nutzen Sie <br/> tag zu verschieben das Bild in eine neue Zeile. Ich bin nicht wirklich glücklich mit dieser Problemumgehung, die <br/> tut Präsentations-Zeug, das sollte besser sein in CSS.

<p>Some text here<br/><img src="myphoto"/></p>

Schließlich, legen Sie die display-Attribut des <img> als block im CSS-Stylesheet. Ich bin mir nicht sicher, ob das ein guter Weg und weiß nicht, die unzusammenhängenden Folgen es haben kann.

Ich weiß nicht, ob es ein standard-Weg, dies zu tun. Ich Suche für CSS mein Bild in eine neue Zeile, aber habe es nicht gefunden. Jede Hilfe wird willkommen sein.

InformationsquelleAutor David Casillas | 2010-10-14

  1. 11

    Ok, dies ist also meine neue Lösung. Grundsätzlich setzen wir einfach das IMG-element um ein block-level element. 

    img { display:block; }

    Diese Lösung nicht einführen ohne neue markup. (Sie legen gerade die <img> element direkt nach dem text im Absatz /Liste.)

    Ich glaube, dass dies die eleganteste Lösung, da diese Einstellung die Bilder werden Blöcke ist sehr verbreitet trotzdem.

    David ' s point ist er nicht wollen, eine separate Kugel für die anschauliche Bild folgt der text - es ist kein eigener posten, es macht keinen Sinn zu haben, seine eigene Kugel.
    Aha ich es bekommen ...
    Rudu genau das sagt, was ich denke, und Sime Vidas stimmt mit ihm und schließt seine Hilfe ist nicht Recht, aber ich kann nicht undestand. Wenn ich einen <br> - tag innerhalb des <li> tag, um das Bild in eine neue Zeile ich bin die Vermeidung mit einer anderen <li> - tag für das Bild ein und ich bekomme es angezeigt, in einer neuen Zeile. Ist es rigth?
    Ihre aktualisierte Lösung auch scheint, desto besser für mich. Ich kann nicht die Notwendigkeit sehen, von einem äußeren DIV-als JacobM schlägt vor, unter. Kann es sein, das brauchen Sie, um ein CLASS-Attribut der IMG so nicht jedes Bild wird die Darstellung in einer neuen Zeile.
    Ja, natürlich. Das einstellen aller Bilder zu den Blöcken wäre Unsinn.

    InformationsquelleAutor Šime Vidas

Schreibe einen Kommentar