Quand est-ce que l'ordre des éléments HTML est important?

Question

J'ai une ligne de texte que je veux placer à côté d'un petit graphique, dans une mise en page liquide en plein écran. Je l'ai fonctionné, mais je ne suis pas sûr pourquoi.

Le html:

<div class="wrapper"> 
    <div class="image_container"> 
    <img src="some_valid_url"> 
    </div> 
    <div class="text">Zachary</div> 
</div> 

Le CSS (écrit en SASS, si vous êtes curieux de savoir l'imbrication):

.wrapper { 
    text-align: right; 
    float: left; 
    width: 10%; 
    word-wrap: breakword; 
} 

.image_container { 
    margin-left: 2px; 
    float: right; 

    img { 
     height: 20px; 
     width: 20px; 
     vertical-align: top; 
    } 
} 

.text { 
    overflow: hidden; 
} 

Qu'est-ce que cela est censé faire est de placer le petit graphique et le texte sur une seule ligne, et le graphique soit juste à la droite du texte. Et cela fonctionne, mais seulement si le div image_container est au-dessus du div de texte. Retournez-les et l'image se trouve maintenant en dessous du texte. Pourquoi donc?

Answer 1

Il a à voir avec div.text étant un élément de niveau bloc et n'interagissant pas avec le .image_container flottant.

Lorsque .image_container est avant div.text dans le balisage il flotte à droite et ensuite parce div.text ne disparaît pas ou est flottaient, il ne tient pas compte essentiellement .image_container et va sur la même ligne verticale.

Cependant, lorsque .image_container est après div.text, ce qui occupe 100% de l'espace horizontal disponible (parce que c'est un niveau de bloc), il le respecte et flotte vers la droite, juste en dessous.

Si vous mettez des bordures autour de vos deux éléments, cela devrait être clair.

Answer 2

Ce n'est pas vraiment le HTML qui compte, mais le CSS. CSS float traite toujours les éléments comme un blocks-- un élément flottant. Un élément avec un flotteur gardera fondamentalement un pied sur le sol, où sa position de bloc est, mais le reste flotte dans l'air. Les flottants CSS n'agissent pas comme des absolus de position, ce qui le fait sortir totalement de sa position de bloc et le fait flotter.

Answer 3

Je crois que le problème est votre alignement de texte dans le wrapper. Text-align alignera également les éléments dans la div, donc si votre texte est listé en premier, le texte et l'image seront poussés vers la droite. Vous pouvez probablement corriger cela en ajoutant "float: left" à votre classe de texte.

Answer 4

j'ai fait une solution personnalisée, il fonctionne même vous mettre conteneur d'image ci-dessous ou jusqu'à texte

<div class="wrapper clearfix"> 
    <div class="image_container"> 
     <img src="http://www.netbsd.org/images/download-icon-orange.png" /> 
    </div> 
    <div class="text">Zachary</div> 
</div> 

.image_container,.text{ 
    float:left; 
    line-height:40px; 
} 

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */​ 

vous pouvez voir son working demo

faites-moi savoir si autre chose est nécessaire.