Garder un élément en bas de td

J'ai td qui a un fond d'arrière-plan. Et je veux garder mon tag h2 au-dessus de cet arrière-plan. Mais la hauteur de td peut changer d'un td à un autre.Garder un élément en bas de td

Ce que je m'attends à quelque chose comme ci-dessous. Est-il possible de faire avec css Toute aide?

enter image description here Merci

Source

2011-11-16 huMpty duMpty

est tout censé aller entre le h2 et l'arrière-plan? sinon, faites un div avec l'image de fond et le h2 où ils doivent être. vous pouvez contrôler la taille de la div – DefyGravity

css td valign = "bas" & ajouter un remplissage à la td sur le fond? –

Voulez-vous que le h2 soit positionné * verticalement * au-dessus de l'arrière-plan ou sur un * z-index * au-dessus de l'arrière-plan? Votre choix de mots est ambigu, bien que votre image suggère que vous voulez dire le premier. – Blazemonger

Essayez d'ajouter votre arrière-plan à l'élément h2 (en utilisant CSS) au lieu de la td. Ensuite, utilisez vertical-align: bottom sur le td pour le forcer vers le bas.

http://jsfiddle.net/mblase75/Bxxx5/

td { 
    vertical-align: bottom; 
    text-align: center; 
} 
h2 { 
    background-image: url(whatever.png); 
}

Source

2011-11-16 15:29:34 Blazemonger

Il suffit de mettre un fond de rembourrage sur la td la hauteur de l'image d'arrière-plan.

Source

2011-11-16 15:15:42 deviousdodo

Utilisez vertical-align: bottom sur la cellule de votre tableau et ajoutez qui correspond à la hauteur de votre arrière-plan.

http://jsfiddle.net/SCqPp/

Edit: Si vous voulez asseoir sur de l'arrière-plan, il suffit de retirer le rembourrage inférieur, comme ceci: http://jsfiddle.net/wqAkF/

Source

2011-11-16 15:15:45 Leo

J'ai essayé, mais quand la hauteur de td change, h2 s'éloigne –

utilisez-vous display: inline-block ou en utilisant des flottants? – ToddBFisher

J'ai ajouté un jsfiddle là-bas afin que vous puissiez avoir un exemple de travail. – Leo

Sans voir le code, difficile à dire. Mais vous pouvez probablement utiliser

vertical-align:top;

pour la td

Source

2011-11-16 15:16:21

dans son cas, 'vertical-align: bottom;' –

Garder un élément en bas de td

Répondre

Questions connexes