CSS - make div's hérite d'une hauteur
J'essaie de faire une boîte avec des coins arrondis où la hauteur et la largeur de la div dépendent du contenu, de sorte qu'il s'adapte automatiquement à celui-ci ...
Vous pouvez voir l'exemple ici: http://pastehtml.com/view/1duizyf.html
Le problème est que je ne peux pas obtenir les "test_mid_left" (fond noir) et "test_mid_right" (fond turquoise) pour hériter de la hauteur du "test_mid_center" (fond vert). J'ai essayé la taille: 100% et automatique, mais aucun travail ne fonctionne. Alors, comment puis-je les amener à hériter de la hauteur du contenu?
(La raison pour laquelle j'ai utilisé "min-height: xx" dans le contenu à gauche et à droite de l'exemple est simplement pour montrer les cases dont je parle)
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 conscients de leurs frères et sœurs, alors par exemple, les deux flotteurs latéraux ne connaissent pas la hauteur du contenu du centre et ne peuvent donc pas hériter. de rien.
Habituellement, la hauteur héritée doit provenir d'un élément ayant une hauteur explicite ou si height: 100%; lui a été transmis par le biais de l'arborescence d'affichage. La seule chose que je sache est celle qui transmet une hauteur qui n'est pas venue du haut de "l'arbre" est un élément placé de manière absolue - vous pouvez par exemple positionner de manière absolue tous les coins en haut à droite, en bas à gauche et dans les coins (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 des hauteurs des bords haut/bas), ainsi que la largeur des centres haut/bas sont faciles à 100% - la seule chose à calculer est la hauteur des côtés droit/gauche si le contenu grandit -
Vous pouvez le faire même sans utiliser les quatre coordonnées de positionnement que IE6 /7 ne supporte pas
J'ai donné un exemple basé sur ce que vous avez donné, il repose sur une largeur fixe (votre cadre), mais je pense que cela pourrait également fonctionner avec une largeur flexible? Cette utilisation pourrait être intéressante pour les bordures d'images sophistiquées pour lesquelles nous ne pourrons obtenir de support que lorsque plusieurs images d'arrière-plan ou des bordures d'images deviennent pleinement disponibles. Qui sait, je jouais, alors restez là!
exemple de preuve de concept est ici
Le problème
Lorsqu'un élément est flotté, son parent ne le contient plus car il est supprimé du flux. L'élément flottant étant en dehors du flux naturel, tous les éléments de bloc seront rendus comme si l'élément flottant n'y était même pas. Par conséquent, un conteneur parent ne serait pas complètement développé pour contenir l'élément enfant flotté.
Consultez l'article suivant pour avoir une meilleure idée du fonctionnement de la propriété CSS Float:
Le mystère de la propriété CSS Float
Une solution potentielle
Maintenant, je pense que l'article suivant ressemble à ce que vous essayez de faire. Jetez un coup d'oeil et voyez si vous pouvez résoudre votre problème.
Colonnes de même hauteur avec CSS transversales
J'espère que ça aide.
Vous devez sortir un flotteur: à gauche; property ... parce que lorsque vous utilisez float, le parent parent ne pas grub la hauteur de ses enfants ... Si vous voulez que la plongée parent obtienne la taille de l'enfant, vous devez lui donner un dépassement de propriété css: hidden ; Mais pour résoudre votre problème, vous pouvez utiliser display: table-cell; au lieu de float ... il redimensionnera automatiquement la hauteur de div à la hauteur de son parent ...
Le truc de la marge négative:
http://pastehtml.com/view/1dujbt3.html
Pas élégant, je suppose, mais cela fonctionne dans certains cas.