Utilisation :après l'auto clair divs. Est-ce le droit de travailler?
J'ai le code HTML suivant:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
J'aimerais qu'il y ait un 10px écart entre la div et span, par le margin-top. Mais, depuis la div ci-dessus est flottant, il ne rend pas de cette façon. Le correctif assurez-vous que quelque chose de clair de la DIV. Pour le faire par pur CSS, il apparaît un shoudl utiliser le ':après la méthode de l'insertion du contenu qui est alors mis en clair:
.selfClear:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
Cependant, ce n'est pas tout à fait faire ce que je pense qu'elle doit faire. Si je ne comprend pas la hauteur et de la visibilité de styles de sorte que je peux réellement voir l'exercice comme il est inséré, je vois que c'est effectivement rendu à l'intérieur de la div (la bordure noire enferme), plutôt que d'après la div (c'est donc entre la div et span). Suis-je l'incompréhension comment cela devrait fonctionner?
EDIT:
Voici un exemple plus simple:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv:after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
Qui finit par placer un point après "Bonjour", plutôt qu'après la div.
Il apparaît que :after et :before sont effectivement ajouté au CONTENU de l'élément, et non pas l'élément lui-même. Est-ce exact?
OriginalL'auteur DA. | 2009-10-09
Vous devez vous connecter pour publier un commentaire.
Oui, il ajoute au contenu de l'élément sélectionné. Vous pouvez essayer de l'emballage de la div en ajoutant après le wrapper div, mais cela va à l'encontre de l'objectif même de l'utilisation :après avoir en premier lieu.
OriginalL'auteur CodeJoust
Vous pouvez également essayer de définir l'affichage de div à "overflow: auto". Qui fonctionne partout.
OriginalL'auteur Alex Morales
Je conseille clearfix - c'est beaucoup plus simple, il suffit de fixer un environnant avec une classe de clearfix.
Voir cet exemple.
OriginalL'auteur Robert W