CSS: set Hight à 100% des parents

Question

J'ai quelques quelques rangées de pouces d'image ancre à l'intérieur dans une div, un div pour chaque ligne, comme ceci:

<div class="row"><a><img></a><a><img></a><a><img></a></div> 
<div class="row"><a><img></a><a><img></a><a><img></a></div> 

Les images ont des proportions différentes, certains portrait , un peu d'orientation paysage. Les dimensions maximum pour les pouces sont 150px (large ou grand), et ils sont toujours 150px larges ou hauts.

Je souhaite que toutes les images soient alignées avec le bas de leur div parent .row. Donc, s'il y a des portraits à la suite, tous les paysages s'aligneront en bas et auront de l'espace au-dessus d'eux. Pour que les images alignées au fond, je leur position absolue, et par rapport à leur point d'ancrage Pour ce faire, j'utilise le CSS suivant:

<style> 
div.row { 
    float: left; 
    clear: both; 
} 

.row a { 
    position: relative; 
    float: left; 
    width: 175px; 
} 

.row a img{ 
    position: absolute; 
    bottom: 0px; 
} 
</style> 

Les travaux ci-dessus bien et comme prévu, mais il a un défaut que j'essaie de corriger: Il faut que la hauteur des balises d'ancrage relativement positionnées soit définie à une taille spécifique. Je ne veux pas ça, parce que si une ligne ne contient que des pastilles de paysage, je ne veux pas qu'elle soit inutilement élevée.

Je veux que chaque div .row soit la hauteur de l'image la plus haute qu'elle contient.

S'il n'y a que des paysages dans une rangée, la hauteur de cette rangée sera juste celle du paysage le plus élevé.

Je croyais que je serais en mesure de résoudre ce problème en réglant la hauteur si les éléments à 100%:

<style> 
.row a { 
    position: relative; 
    float: left; 
    width: 150px; 
    height: 100%; 
} 
</style> 

Ce serait alors 100% de sa mère, le .row div. Mais pour une raison quelconque, cela ne fonctionne que si je spécifie la hauteur de la div .row, puis-je avoir le même problème (toutes les lignes de hauteur égale quel que soit le contenu réel:

<style> 
div.row { 
    float: left; 
    clear: both; 
    height: 150px; 
} 

.row a { 
    position: relative; 
    float: left; 
    width: 150px; 
    height: 100%; 
} 
</style> 

Cependant, depuis le .row div se développe dynamiquement avec ses images contenues, il a en fait la hauteur que je suis en train de se référer à ma hauteur: 100% pour l'étiquette A. Mais pour une raison quelconque cela ne fonctionne pas

Pourquoi? Qu'est-ce que je ne comprends pas ici, et comment faire? Je passe beaucoup d'heures sur ceci avant de tourner ici, j'espère que quelqu'un a la réponse en or

Answer 1

C'est peut-être plus facile à utiliser inline-block au lieu de flotter. Quelque chose comme ceci:

http://jsfiddle.net/cvQAZ/1/

Ou avez-vous besoin des liens ont en fait la même hauteur? Ensuite, essayez une mise en page « de table » (non pris en charge par IE6):

http://jsfiddle.net/DpvgR/1/