web-dev-qa-db-fra.com

Comment puis-je faire une div HTML aller sous une 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>

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

csshtmlrows
15
DarkLightA

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

Si vous voulez vraiment tout savoir sur les flotteurs, consultez ce tutoriel incroyable: http://css.maxdesign.com.au/floatutorial/

19
Dave Kiss

Utilisez clear:both; sur votre contenu n ° 2

2
sgokhales

Appliquer:

#images1{
 float:right;   
}

#content2{
 clear:both;   
}

et réparer votre balise HTML

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

fermer le div:

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

overflow:hidden sur votre content1 div le développera pour inclure tous les enfants flottants. (Bien sûr, cela masquera le contenu non flottant qui déborde.)

0
Tgr

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

0
solendil

utilisez 'clear: both' sur content2 div

0
Rizwan Sharif

J'espère que vous aurez besoin d'ajouter un autre div avant <div id="content2">Text 2</div> qui sera <div style="clear:both;"></div>

0
sudipto

effacer vos flotteurs. Voici un article décrivant ce qui se passe: Suppression d’un élément flottant

0
BentOnCoding

Vous n'avez pas fermé <div id="images1">. Si cette div est fermée et que les div Content ne flottent pas, cela devrait fonctionner.

0
Vinnyq12