positionnement CSS (marge/padding) avec la contrainte de balisage

J'ai deux divs frères et soeurs assis dessous de l'autre, tous deux contenus dans le même div parent. L'exigence est que les divs ont besoin d'un certain espace entre eux, disons 20px, mais l'espace entre les divs internes et le div parent doit être le même de tous les côtés (haut, droite, bas, gauche), dans ce cas 0px.positionnement CSS (marge/padding) avec la contrainte de balisage

La contrainte ici est que les divs internes doivent avoir exactement le même balisage, donc je ne peux pas appliquer une classe différente ou supplémentaire à l'un d'entre eux. De plus, je ne peux pas ajouter de balisage entre les divs enfants ou seulement au-dessus ou au-dessous de l'un des divs enfants.

Quel serait un bon moyen de résoudre ce problème avec CSS (pas javascript), d'une manière compatible avec tous les navigateurs?

Merci!

Source

2010-08-13 Jaap

#parentdiv div { 
    margin-top: 20px; 
} 

#parentdiv div:first-child { 
    margin-top: 0; 
}

devrait le faire. Sinon, vous pouvez essayer

#parentdiv div + div { 
    margin-top: 20px; 
}

Quelle est la solution à utiliser dépend du soutien de la browers soit pseudo-classe :first-child, ou le sélecteur + adjacent. Tout navigateur moderne (donc, en actualisant IE6) devrait supporter les deux.

Source

2010-08-13 13:42:37 igor

Note:: pseudo-classe de premier-enfant et sélecteur adjacent ne fonctionnera pas sur IE6 –

Merci, Yi Jiang, pour le signaler. Je suppose qu'il n'y a pas de solution CSS pure à ce problème pour IE6, sans avoir recours à un balisage supplémentaire. – igor

malheureusement, il doit fonctionner dans IE6 ainsi – Jaap

vous pourriez insérer un autre div entre eux et faire sa hauteur 20px? ou est de mettre le premier div interne dans un nouveau div et ensuite faire la nouvelle marge de fond div 20px une solution acceptable?

Source

2010-08-13 13:45:04 pootzko

Comme d'autres l'ont déjà dit, vous ne pouvez pas utiliser une approche CSS pure qui fonctionnera dans IE6. Cependant, pourquoi ne pas utiliser un minified, cadre jQuery de base - sans l'interface, il sera minuscule - et vous pouvez appeler le premier enfant et appliquer la marge que:

$("#parentdiv:first").css({ marginTop: 0 })

De cette façon, vous auriez déjà appliqué la marge supérieure: 20px; dans votre css, maintenant vous le supprimez du premier enfant seulement. Je sais que vous avez dit que vous ne vouliez pas d'une approche javascript, mais vous n'avez pas beaucoup de choix, à moins que vous ne soyez prêt à ré-ingénieur ie6 et le ressusciter pour nous?

Hope this helps quelqu'un quelque part.

Source

2010-08-13 14:07:41 SimonDowdles

Deux divs assis dessous de l'autre? Voulez-vous dire qu'ils sont empilés verticalement, l'un sur l'autre? Margin-top le ferait tant que vous n'avez pas de padding sur le div parent.

Essayez cet exemple.

<html> 
<head> 
<style> 
div.parent { 
    background-color: #AAA; 
} 
div.child { 
    background-color: #CCC; 
    margin-top: 20px; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
    <div class="child">&nbsp;</div> 
    <div class="child">&nbsp;</div> 
</div> 
</body> 
</html>

Vous remarquerez que tant qu'il n'y a rien à l'intérieur du parent au-dessus du premier enfant ses marges ne prolongera pas la div parent.

Si elles sont côte à côte et flottantes, c'est différent, margin-left ne fonctionne pas comme margin-top. Vous pourriez être en mesure d'utiliser margin-right sur les deux divs mais fixer la largeur du parent et mettre overflow à caché afin de couper la marge étendue - mais je ne suis pas sûr de la compatibilité sur ce genre de chose.

Etes-vous absolument certain que vous n'avez aucun moyen de distinguer les deux divs? Trouver un moyen de contourner cette contrainte pourrait faire beaucoup pour vous aider.

Source

2010-08-13 14:09:30 Andrew

positionnement CSS (marge/padding) avec la contrainte de balisage

Répondre

Questions connexes