Unterschied zwischen eingerückten HTML und Inlined HTML

Ich überschreibe eine Client-Webseite und ich habe einige Probleme mit HTML-Rendering.Unterschied zwischen eingerückten HTML und Inlined HTML

Next-Code ist die alte HTML und alle "a" und "img" -Tags sind in einer Zeile wie diese (INLINE IMG):

<div id="inside-img"> 
    <div class="img" style="width:8643px"><a href=""><img src=""/></a><a href=""><img src=""/></a>... ...</div> 
</div>

Als ich das umschreiben, mit besseren Einzug wie folgt aus (eingerückt IMG):

<div id="inside-img"> 
    <div class="img" style=""> 
     <a href=""><img src=""/></a> 
     <a href=""><img src=""/></a> 
     ... 
    </div> 
</div>

Die Ausgabe von HTML bricht, wie Sie in dem Bild sehen können, das ich beigefügt habe.

Es gibt viele Bilder und das letzte Bild bewegt sich nach unten, anstatt am Ende der Zeitleiste zu sein. Ich weiß nicht warum, wenn ich HTML eingebe, ändern sich HTML-Stil.

Quelle

2017-06-21 Iker Ocio Zuazo

Raum zwischen Bildern vs. kein Leerzeichen ... – deceze

Alles, was mit dem Inline-Stil von festen Pixeln in der ursprünglichen Version zu tun hat? Ist der zweite eine definierte Breite, unter der das letzte Bild kollabiert? – MegaTron

Wenn Sie nur Bilder haben, können Sie sie mit 'font-size: 0;' auf '' – Chiller

Es scheint ein Problem im Zusammenhang mit Elementen display als inline-block s, die für Leerzeichen besteht. Während der OP keine CSS Markup zugeordnet liefert, sollte diese Arbeit:

<div id="inside-img"> 
    <div class="img" style="font-size:0;"> 
     <a href=""><img src=""/></a> 
     <a href=""><img src=""/></a> 
     ... 
    </div> 
</div>

oder diese (beachten Sie die zusätzlichen Kommentare)

<div id="inside-img"> 
    <div class="img" style=""> 
     <a href=""><img src=""/></a><!-- 
     --><a href=""><img src=""/></a><!-- 
     -->... 
    </div> 
</div>

Für eine vollständige Erklärung siehe https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Quelle

2017-06-21 11:21:06 pecus

Es hat die Einstellung Ihrer ersten Option gelöst. In der Nacht werde ich eine vollständige Erklärung in Ihrem Link sehen. Vielen Dank. –

Diese zwischen inline Artikel wegen Leerraum passieren. Leerstelle zwischen inline Element in HTML wird auf dem Bildschirm sichtbar. Da Bild ein Inline-Element ist, hat Ihr erstes Codebeispiel keinen Platz zwischen HTML-Tags. während im zweiten Beispielcode ihr Abstand zwischen ihnen ist (neue Zeile), wird dies als ein Zeichen (d. h. Leerzeichen) in HTML erscheinen.

Mögliche Lösung hierfür ist Font-size: 0; auf dem Eltern div.

Quelle

2017-06-21 11:19:53

Unterschied zwischen eingerückten HTML und Inlined HTML

Antwort

Verwandte Themen