CSS：親の100％に高さを設定する

Question

<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> 

画像は異なる比率を有する、いくつかの肖像画、いくつかの横向き：

私はdivの内側アンカー内部画像親指のいくつかのいくつかの行は、このような各列に対して1つのDIVを有します。サムの最大サイズは150ピクセル（幅または高さ）で、幅または高さは常に150ピクセルです。

すべての画像を親の.row divの一番下に揃えたい。 ある行に肖像画があれば、いずれの風景も一番下に揃えられ、その上にいくらかのスペースがあります。画像は下部に揃え、私は彼らが絶対、およびそのアンカー に対するこれを行うに位置していると 、私は以下のCSSを使用します。

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

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

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

上記の罰金と期待通りに動作しますが、それが欠陥を持っています私が修正しようとしているのは、相対的に配置されたアンカータグの高さが特定のサイズに設定されている必要があります。行のみ景観親指が含まれている場合、私はそれが必要以上に高くなりたくないので、

私は、それを望んでいません。

私は、各.row divのは、それが含まれている最高の画像の高さになりたいです。

行にのみ景観がある場合は、その行の高さだけでは最高の景観となります。

もし私が高さを100％に設定してこれを修正することはできますが、

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

それは親の100％である.row divです。しかし何らかの理由で、これは.row divの高さを指定しても同じ問題が発生します（実際の内容にかかわらずすべての行が同じ高さになります）。

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

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

ただし、.row divそれが含まれている画像で動的に成長すると、実際には高さで参照しようとしている高さがあります：aタグの100％ですが、何らかの理由で機能しません。ここでは、どのようにこれを行うには？私はうまくいけば、誰かが黄金の答えを持って、ここで電源を入れる前に、これに多くの時間を費やす 。

Answer 1

はそれですおそらく浮動小数点の代わりにinline-blockを使用する方が簡単です。このような何か：

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

それとも、リンクは実際には同じ高さを持っている必要がありますか？そして、「表」レイアウト（IE6でサポートされていない）を試してみてください。

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