Je me demandais comment faire cela, ma marque actuelle est la suivante: maintenant, si je crée une balise de paragraphe après le dernier Merci gars , le contenu de la balise p ne figure pas sous toutes ces div dans le navigateur.
Des idées comment je peux faire ça?
4 Réponses :
Vous devrez donner à la playarea une valeur de hauteur, les divs absolus n'élargiront pas leur parent
Si vous utilisez un positionnement absolu, mais vous ne connaissez pas la hauteur de ce que vous positionnez, c'est un problème que HTML n'est pas très bon à la résolution. J'ai vu (et probablement écrit) hacks où JavaScript est utilisé pour positionner un élément basé sur le Mais vous risquez peut-être mieux à l'aide de la propriété CSS offSetheight d'un autre.
Float au lieu d'un positionnement absolu. Float et Effacer est plutôt bon pour positionner des choses comme vous le souhaitez, sans sacrifier le flux de pages automatique.
La Playarea DIV Dans ce cas ne se développera pas automatiquement en largeur / hauteur pour s'adapter aux éléments de l'intérieur, et comme il n'a pas de hauteur défini, il est traité comme ne supprime aucune pièce (ce qui signifie que la balise
apparaissent au même endroit que la DIV). P>
Si vous ne connaissez pas les dimensions de la playarea div avancée de la main ou ils risquent de changer, il serait préférable de mettre en place vos éléments à l'aide de flotteur, claire et marge pour obtenir la même mise en page que vous avez actuellement. p>
Si vous ne le faites pas déjà, obtenez le Firebug Plug in pour Firefox - Cela facilitera votre vie CSS, car vous pouvez éditer CSS et voir les modifications à la volée. N'oubliez pas de tester dans d'autres navigateurs aussi, cependant. P>
EDIT: Voici un exemple fait avec des flotteurs (le fait-il dans une précipitation alors pourrait ne pas être parfait) P>
<div id="playArea" style="float: left;">
<div id="widget2" class="widget" style="background-color: green; float: left; margin-left: 63px; margin-top: 35px; width: 80px; height: 42px;">World</div>
<div id="widget1" class="widget" style="background-color: red; float: left; margin-left: 152px; margin-top: -1px; width: 313px; height: 269px;">Hello</div>
<div style="background-color: blue; float: left; clear: left; margin-left: 534px; margin-top: 26px; width: 183px; height: 251px;">Bye</div>
</div>
<p style="clear: both; float: left;">Test P Element</p>
Hey, merci pour votre réponse. Mais ce code que vous avez suggéré, ne résout pas mon problème comme le deuxième widget (widget1) commence après le 1er widget. Donc, fondamentalement la marge: 0; Sur le deuxième widget positionnant le DIV droit sous le premier div. Je le veux afin que la DIV puisse apparaître n'importe où, la deuxième div pouvait être affichée au-dessus du premier si possible. J'ai essayé divers changements en utilisant Firebug mais n'a pas encore trouvé une solution. Merci
Idéalement, je veux que chaque div commence à la position de x = 0 y = 0 et le seul moyen que j'ai trouvé cela jusqu'à présent consiste à utiliser un positionnement absolu. Mais avec l'utilisation claire: à gauche; Le Y est égal à la hauteur totale du courant DIV
Étant donné que les éléments absolument positionnés ne "remplissent pas" la boîte de la playarea div, la hauteur et la largeur que vous affectez chaque enfant div ne développez pas la hauteur et la largeur de Playarea. Je ne suis pas sûr de ce que le problème final est que vous essayez de résoudre, mais à partir des noms de vos identifiants, vous essayez de positionner des éléments dans une zone "Toile". C'est bon.
Les hauteurs et les largeurs des DIV absolument positionnées n'ont encore aucun impact sur les dimensions de Playarea Div, mais par savoir les hauteurs et les largeurs que vous êtes capable de dire à la playarea à quoi servent ses dimensions. Dans ce cas, donner une largeur de Playarea de 580px et la hauteur de 785px positionnera correctement l'élément P.
Enlevez de nouveau de vos identifiants Div, c'est une bonne idée de définir explicitement les dimensions de quelque chose comme une playarea où les éléments contenus ne sont pas disposés comme des éléments de page normaux (absolument positionnés ou non). De cette façon, vous aurez une mise en page plus prévisible.
Cette question peut aider: