CSS: Méthode alternative à positon absolue

Question

J'ai la marque suivi:

<div id="playArea" style="position: relative;"> 
    <div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div> 
    <div style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div> 
    <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div> 
</div> 

Mais je voudrais avoir un paragraphe de texte sous la div « playarea », mais parce que tous les divs intérieur playarea est absolue , le texte n'apparaît pas au bas du dernier div positionné absolu. J'ai examiné cette option et trouvé une alternative en utilisant float: left et clear: left mais après avoir utilisé cette méthode sur la première div, vous ne pouvez pas positionner la div correctement car le point de départ de la seconde div est sous la première div et pas à (0,0). Toutes les idées de comment je peux obtenir par cela.

Merci

Answer 1

Si je comprends bien, il vous suffit de donner le « playarea » div la bonne hauteur.

Editer: Je veux dire, la hauteur combinée de tout ce qu'il contient.

Answer 2

Mais je voudrais avoir un paragraphe de texte sous la div « playarea », mais parce que tous les divs intérieur playarea est absolu, ne marche pas de texte apparaissent au bas du dernier div positionné absolu.

Comme vous semblez connaître toutes les dimensions et les positions déjà, il suffit d'ajouter un autre div en position absolue et à mettre le contenu relatif en elle.

J'ai regardé cette question et trouvé une alternative en utilisant float: left et clair: gauche mais après avoir utilisé cette méthode sur la première div, vous ne pouvez pas placer le div correctement comme point de départ de la deuxième div est sous la première div et pas à (0,0). Toutes les idées de comment je peux obtenir par cela.

Vous devez retirer position: absolute pour obtenir les flotteurs droit. Juste la largeur et la hauteur sont assez.

Answer 3

Float les trois divs internes gauche, mettre overflow: hidden; sur la playarea div et mettre votre <p> sous les trois divs internes avec clear: both;

Answer 4

Après avoir lu le fil de commentaires entre vous et « BalusC », il semble que vous avez modifié votre CSS et essayez maintenant de faire flotter vos articles, et utilisez margin-top et margin-left pour le positionnement. Vous êtes totalement capable de le faire de cette façon, mais vous oubliez que vous pouvez également utiliser des marges négatives pour positionner vos éléments. Par exemple si vous utilisez margin-top: -10px; puis il va tirer l'élément vers le haut (au lieu de le pousser vers le bas, comme une marge de valeur positive normale). La même chose vaut pour toutes vos autres marges.

Cela semble être l'ingrédient manquant pour vous maintenant.