Différence entre le HTML indenté et le HTML incorporé

Je suis en train de réécrire une page Web client et j'ai quelques problèmes avec le rendu HTML.Différence entre le HTML indenté et le HTML incorporé

code suivant est l'ancien HTML et tous « a » balises et « img » sont dans une ligne comme celui-ci (INLINE IMG):

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

Quand je réécrivons cela, avec une meilleure indentation comme celui-ci (dentelées IMG):

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

La sortie du code HTML se brise comme vous pouvez le voir dans l'image que j'ai jointe.

Il y a beaucoup d'images et la dernière image, se déplace vers le bas au lieu d'être à la fin de la timeline. Je ne sais pas pourquoi quand je indent HTML, le changement de style HTML.

Source

2017-06-21 Iker Ocio Zuazo

Espace entre les images et pas d'espace ... – deceze

Quelque chose à faire avec le style inline des pixels fixes dans la version originale? Le second est-il une largeur définie qui provoque le repli de la dernière image? – MegaTron

Si vous avez seulement des images, vous pouvez le resovle avec 'font-size: 0;' on '' – Chiller

Il semble y avoir un problème lié aux éléments définis sur display comme inline-block s, ce qui explique les espaces. Bien que l'OP ne fournit pas de CSS associée au balisage, cela devrait fonctionner:

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

ou ce (notez les commentaires supplémentaires)

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

Pour une explication complète voir https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Source

2017-06-21 11:21:06 pecus

Il a résolu la définition de votre première option. La nuit, je vais voir une explication complète dans votre lien. Merci beaucoup. –

Cela arrive en raison de l'espace blanc entre inline articles. L'espace blanc entre inline élément en HTML devient visible à l'écran.Comme l'image est un élément en ligne alors votre premier échantillon de code n'a pas d'espace entre les balises HTML. alors que dans le deuxième exemple de code, il y a de l'espace entre eux (nouvelle ligne), cela apparaîtra comme un caractère (c'est-à-dire un espace) en HTML.

Une solution possible pour cela est l'utilisation de Font-size: 0; sur le parent div.

Source

2017-06-21 11:19:53

Différence entre le HTML indenté et le HTML incorporé

Répondre

Questions connexes