Comment puis-je faire un div HTML aller sous un autre div?

<html>
<body>
<div id="content1">
    <div id="text1">This text floats left</div>
    <div id="images1"><img src="img.jpg" /></div> <!--Floats right-->
</div>
<div id="content2">Text 2</div>
</body>
</html>

Quand j'essaie de le faire, et essayer de faire une mise en page comme un tableau à deux lignes avec le texte flottant à gauche et l'image flottante à droite dans la rangée du haut, tout ce qui vient à l'esprit est que les content2-div est écrasé dans la content1-div. Comment puis-je le garder séparé?

source d'informationauteur DarkLightA

  1. 16

    Vous devez utiliser clear:both; sur votre #content2 div

    Si vous voulez vraiment tout savoir sur les flotteurs, découvrez ce tutoriel étonnante: http://css.maxdesign.com.au/floatutorial/

  2. 2

    Utilisation clear:both; sur votre contenu#2

  3. 1

    S'appliquent:

    #images1{
 float:right;   
}

#content2{
 clear:both;   
}

    et réparer votre balisage html

    <div id="images1"><img src="img.jpg" /> <!--Floats right-->

    fermer la div:

    <div id="images1"><img src="img.jpg" /> <!--Floats right--></div>
  4. 0

    Vous avez oublié de fermer votre <div id="images1"> 🙂

  5. 0

    utiliser "clear:both" sur content2 div

  6. 0

    Je l'espère, vous devez ajouter un autre div avant <div id="content2">Text 2</div> qui sera <div style="clear:both;"></div>

  7. 0

    clair de votre flotte.
    Voici un article décrivant ce qui se passe: La Compensation D'Un Flotteur Élément

  8. 0

    Vous n'avez pas fermé <div id="images1">. Si cette div est fermé et le Contenu divs ne sont pas flotter à gauche, puis il devrait fonctionner.

  9. 0

    overflow:hidden sur votre content1 div va faire élargir pour inclure tous les flottait enfants. (Bien sûr, cela permet de masquer la non-flotté débordant de contenu.)