Pourquoi les divs se comportent-ils comme ça?

Question

Je reçois ce problème parfois mes divs pour ne pas se comporter comme prévu. Ce que je veux, c'est pour eux de «couler» la mise en page car je comprends qu'ils devraient cependant ils ne sont pas je me demandais pourquoi pas. J'ai utilisé firebug pour inspecter les css et il ne semble pas y avoir quelque chose hors de la norme qu'ils ramassent pourtant ils ne coulent pas les uns après les autres.

J'ai fourni deux ensembles de code un dans un site de test qui est rendu correctement, puis la page problématique.

Code pour divs:

<div style="border:solid 1px #c9c9c9; width:100px; height:100px; float:left;"> 
    sss 
</div> 
<div style="border:solid 1px #c9c9c9; width:100px; height:100px; left:20px; position:realtive;"> 
    2 
</div> 

Pic de Divs Flowing:

http://i45.tinypic.com/t5k8x1.jpg

Pic de Divs ne coule pas

http://i47.tinypic.com/2ewfpz9.jpg

Tout le monde sait comment les amener à se comporter comme prévu? Il vaut la peine de souligner que si je mets un flotteur: à gauche dans la seconde div, cela trie le problème, mais cela signifie que le div suivant ne descend pas à la ligne suivante correctement ....

Espérons que quelqu'un peut aider , très apprécié

Answer 1

float seulement "coupe" le texte, pas les boîtes. Et aucune de vos images n'est un rendu correct de ces propriétés CSS. Le rendu correct devrait être les deux boîtes au même endroit (chevauchement), avec 'sss' à l'intérieur des bordures, et '2' sous la bordure inférieure.

En utilisant float:left; sur les deux divs devrait prendre soin d'elle.

<div style="float:left;">sss</div> 
<div style="float:left;">2</div> 
<div style="clear:both;">the next div</div> 

Si des choses agit vers le haut à travers les navigateurs, assurez-vous d'utiliser un type qui a css par défaut universel, comme xhtml 1.1. Sinon, vous voudrez peut-être générer une feuille de style par défaut pour tous les éléments.

Answer 2

Imho try ajoute float aux deux divs, après que ce troisième div soit clear:both.

Answer 3

Vous pouvez faire le flotteur de deux div à gauche, et au 3ème div dans l'élément ou css rendre « clear: both » ...

images Nice par la voie: D comment diable avez-vous fait em ce n'est pas clair de toute façon.