Pourquoi mes icônes sont-elles alignées de haut en bas au lieu de couler de gauche à droite dans une disposition DIV?

Question

J'ai ces 3 icônes enfermées dans DIVs séparés qui sont tous enfermés dans un seul DIV:

<div id="icons"> 

    <div id="divtxt" class="divicon"> 
    <img src="/icons/text.png" id="icontxt" class="icon"/> 
    </div> 

    <div id="divpdf" class="divicon"> 
    <img src="/icons/pdf.png" id="icondoc" class="icon"/> 
    </div> 

    <div id="divrtf" class="divicon"> 
    <img src="/icons/rtf.png" id="iconrtf" class="icon"/> 
    </div> 
</div> 

Je mis quelques styles simples mais ne peut pas comprendre pourquoi ces images se bousculent haut en bas au lieu de gauche à droite:

div#icons 
    { 
    width:200px; 
    height: 100px; 
    } 

    div.divicon 
    { 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border: 0 0 0 0; 
    } 

Toutes les suggestions seraient appréciées.

Answer 1

Et maintenant quelque chose d'un peu plus complet:

On dirait que vous voulez juste une rangée d'icônes. En utilisant votre code HTML, vous aurez besoin de float les divs contenant les icônes afin qu'ils soient les uns à côté des autres. La raison pour laquelle vous avez besoin de flotter est parce qu'un div est un élément de niveau bloc (par opposition à en ligne), ce qui signifie que rien ne peut exister dans l'espace horizontal à côté de lui.

Vous pouvez obtenir cet effet en ajoutant une règle float: left;-div.divicon

-t flottant deux choses: il prend l'élément de bloc hors du flux de pages permettant à d'autres éléments d'exister à côté (ou le débit autour de lui) et il réduit la largeur de la boîte pour s'adapter au contenu. En ce qui concerne le parent, un élément flottant n'a pas de hauteur. Pour illustrer ceci, essayez de donner #icons une couleur de fond ou une bordure. Vous remarquerez qu'il n'apparaîtra pas - ou apparaîtra comme une ligne 1px.

Pour que le parent de reconnaître la hauteur de l'élément flottant, vous devez dire au parent qui débordent doit être caché à cette règle:

#icons { overflow:hidden; } 

Cela fonctionne également dans IE mais pas toujours, donc parfois vous devrez peut-être définir une hauteur ou une largeur ou faire un zoom:1 qui a tendance à réparer beaucoup de bogues IE (recherchez "hasLayout bug" si vous voulez plus d'informations).

Maintenant, pour une autre solution:

On dirait que vous voulez juste une rangée d'icônes. À moins theres une raison pour que les images soient entourées d'une div (et dans votre exemple il n'y a rien), je vous suggère de faire quelque chose comme ceci:

<div id="icons"> 
    <img src="/icons/text.png" id="icontxt" /> 
    <img src="/icons/pdf.png" id="icondoc" /> 
    <img src="/icons/rtf.png" id="iconrtf" /> 
</div> 

#icons { /* rules for our container go here */ margin:0; padding:0; /* etc... */ } 
#icons img { /* rules for your icons */ border:none; margin:0 2px; /* etc... */ } 

J'ai supprimé les divs redondants et la classe redondante attribuer sur les images. Puisque les images sont des éléments en ligne, vous n'avez pas besoin de visser avec des flotteurs et vous n'avez pas de divs supplémentaires qui peuvent causer une maladie dégénérative du HTML qui affecte de nombreux sites Web et se propage à travers de mauvais conseils. Rappelez-vous, n'utilisez que ce dont vous avez besoin - ne l'utilisez pas simplement parce qu'il est là.

Hope this helps,

Darko

Answer 2

Vous avez besoin d'un

float: left; 

dans vos icônes div #.

Answer 3

div est un élément de niveau bloc. Donc, le comportement par défaut est de mettre en page l'un en dessous de l'autre, sauf si vous les faites flotter comme Robert l'a suggéré.