CSS-faire hériter div's une hauteur
j'essaie de faire une boîte avec des coins arrondis où la hauteur et la largeur du div dépend du contenu, donc il est automatiquement ajustée à elle...
Vous pouvez voir un exemple ici: http://pastehtml.com/view/1duizyf.html
le problème est que je n'arrive pas à faire hériter les "test_mid_left" (fond noir) et "test_mid_right" (fond turquoise) de la hauteur du "test_mid_center" (fond vert). J'ai essayé taille: 100% et auto, mais aucun de thoose travail. Alors comment puis-je leur faire hériter la hauteur du contenu?
(La raison pour laquelle j'ai utilisé "min-height: xx" à gauche et à droite de contenu sur l'exemple c'est juste pour montrer les cases qui je parle)
4 réponses
comme déjà mentionné cela ne peut pas être fait avec des flotteurs, ils ne peuvent pas hériter de hauteurs, ils ne sont pas au courant de leurs frères et sœurs donc par exemple les flotteurs latéraux ne connaissent pas la hauteur du contenu du centre, donc ils ne peuvent pas hériter de quoi que ce soit.
habituellement la hauteur héritée doit provenir d'un élément qui a une hauteur explicite ou si height: 100%; lui a été transmis par l'arbre d'affichage.. La seule chose que je sache, c'est que la hauteur ne vient pas du sommet de "l'arbre" est un élément absolument positionné - ainsi, vous pouvez par exemple positionner absolument tous les côtés et les coins en haut à droite en bas à gauche (vous connaissez la hauteur et la largeur des coins de toute façon) et comme vous semblez connaître les largeurs (des bordures gauche/droite) et les hauteurs des bordures en haut/bas, et les largeurs des centres en haut/bas, sont faciles à 100% - la seule chose à calculer est la hauteur des côtés droit/gauche si le contenu augmente -
ce vous pouvez le faire, même sans utiliser les quatre coordonnées de positionnement qui IE6 / 7 ne supporte pas
j'ai mis en place un exemple basé sur ce que vous avez donné, il ne dépend d'une largeur fixe( votre cadre), mais je pense qu'il pourrait fonctionner avec une largeur flexible aussi? les utilisations de cela pourrait être cool pour ces frontières d'image de fantaisie que nous ne pouvons pas obtenir le soutien pour jusqu'à ce que de multiples images d'arrière-plan ou les frontières d'image deviennent entièrement disponibles.. qui sait, j'étais en train de jouer, alors je l'ai sorti. il y!
l'exemple de validation de principe est ici
Le Problème
Lorsqu'un élément est flottant, ses parents ne contient plus parce que le flotteur est retiré de la circulation. L'élément flotté est hors du flux naturel, donc tous les éléments de bloc vont se transformer comme si l'élément flotté n'était même pas là, de sorte qu'un conteneur parent ne se dilatera pas complètement pour tenir l'élément enfant flotté.
jetez un coup d'oeil à l'article suivant pour avoir une meilleure idée de comment la propriété CSS Float fonctionne:
Le Mystère De La propriété CSS Float Propriété
Une Solution Potentielle
Maintenant, je pense que l'article suivant ressemble à ce que vous essayez de faire. Jetez un coup d'oeil et voir si vous pouvez résoudre votre problème.
colonnes de hauteur égale avec CSS de navigateur croisé
j'espère que cela aidera.
le tour de la marge négative:
http://pastehtml.com/view/1dujbt3.html
pas élégant, je suppose, mais il fonctionne dans certains cas.
vous devez sortir un flotteur: gauche; propriété... parce que quand vous utilisez float le div parent ne grince pas la taille de ses enfants... Si vous voulez que le parent plonge pour obtenir la taille des enfants que vous avez besoin de donner au parent div un débordement de propriété css: caché; Mais pour résoudre votre problème, vous pouvez utiliser display: table-cell; au lieu de flotter... il ajustera automatiquement la hauteur div à sa hauteur mère...