Formater des éléments en ligne? À quoi ressemble le code général?

Question

Ceci est une question de débutant totale, donc merci d'avance. J'essaie de comprendre la différence entre divs et span, et quand et comment les utiliser. Par exemple, je veux avoir une image justifiée à gauche, et je veux que le texte circule autour de l'image sur la droite, tout en maintenant la justification. Si le texte passe au-delà de l'image, je veux qu'elle s'enroule autour du bas de l'image ... de la même manière que ce que nous appelons dans le monde de la mise en page, "wrap".

Je cherche un exemple de référence, alors dans votre réponse pouvez-vous fournir un exemple de la balisage?

Énorme merci !!!

Answer 1

Une étiquette SPAN n'est pas destinée à être un conteneur pour d'autres étiquettes. Ceci est particulièrement utile lorsqu'il est combiné avec des classes. Utilisez divs pour définir des sections d'une page, et s'étend pour entourer et styler du texte ou des classes de texte.

http://www.learnwebdesignonline.com/htmlcourse/span-div.htm montre un bon exemple de la façon dont ils sont utilisés. Pour votre exemple de texte d'emballage, flotter l'image et l'envelopper le tout dans un DIV - comme ceci:

<div> 
test test test test <img src="" alt="" style="float:left;margin:8px 0 0 8px; display:inline" /> test test test test test test test test test test test test 
</div> 

Answer 2

Le niveau de bloc signifie fondamentalement qu'il commence par sa propre ligne par défaut, tandis que le niveau en ligne se trouve à côté d'autres éléments.

[bloc]

[bloc]

contre

[en ligne] [en ligne]

Ni sont enveloppées, cependant. Si le texte devait être enroulé autour de l'image, vous pourriez faire flotter l'image sur le côté. Un exemple de ceci serait comme suit

<img src="picture.jpg" alt="An image" style="float: left" /> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros. Curabitur posuere. Cras sodales leo quis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum adipiscing nunc vel arcu. Ut sed quam non est molestie commodo. Suspendisse metus erat, cursus fermentum, faucibus nec, pulvinar et, lorem. Praesent odio. In interdum imperdiet enim. 

Answer 3

et Divs sont portées genre balises génériques comme sans signification sémantique. Vous pouvez les utiliser pour grouper ou identifier des éléments lorsqu'aucune autre étiquette n'est appropriée (comme des tableaux, des listes ou des en-têtes).Leurs différences sont:

div

• c'est un élément de niveau bloc

• propriété d'affichage par défaut est le bloc qui signifie:

  • son aussi large que son contenant
  • toujours fait des sauts de ligne avant et après
• peut contenir d'autres éléments de type bloc comme p, h1, table, ul, , div
• peut contenir d'autres éléments en ligne comme img, strong, em, input, a, span

travée

• est un élément en ligne

• propriété d'affichage par défaut est en ligne ce qui signifie:

  • est aussi étroite que son contenu
  • n'a pas fait une coupure de ligne sinon nécessaire)
  • vous pouvez utiliser la propriété vertical-align avec css il
• pouvez pas contenir des éléments de niveau bloc
• peut contenir d'autres éléments en ligne comme img, strong, em, input, a, span

Vous pouvez toujours changer leur propriété d'affichage par défaut avec css, mais vous ne pouvez pas changer le type d'éléments qu'ils peuvent contenir, quel que soit de la valeur de la propriété d'affichage. Par exemple:

<span style="display:block"> 
    this will be displayed like a div, 
    but still cannnot contain block level elements 
</span> 

Parce qu'ils sont des balises « génériques », ils sont généralement utilisés pour microformats conjointement avec des classes. Par exemple: <span class="tel">555-5555</span>, car il n'y a pas de tag <tel>.

En ce qui concerne l'emballage d'image, si l'image est directement liée au texte, vous pouvez utiliser:

<p><img src="image.jpg" style="float: right" alt="my image" />Long paragraph.</p> 

Et pas divs ou portées seraient nécessaires. Toutefois, si ce n'est pas, vous pouvez alors utiliser:

<p>unrelated to the image</p> 
<div> 
<img src="image.jpg" style="float: right" alt="my image" /> 
<p>Long paragraph.</p> 
</div> 

ici div est nécessaire parce que p est un élément de niveau bloc.

Enfin, pour plus d'informations, vous pouvez vérifier the official W3C spec topic sur divs et span.