CSS : 나는 이미지 엄지 손가락의 일부 약간의 행이 부모

Question

의 100 %로 높이 설정은 내부 사업부 내에서이 같은 각 행에 대해 하나의 DIV, 앵커 :

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

이미지는 다른 비율이를 몇 세로 , 약간 가로 방향. 엄지 손가락의 최대 크기는 150px (너비 또는 높이)이며 항상 150px 너비 또는 높이입니다.

모든 이미지가 부모 .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가 들어있는 가장 높은 이미지의 높이가되도록하고 싶습니다.

행에 풍경 만있는 경우 해당 행의 높이가 가장 높은 풍경의 높이가됩니다.

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

후 부모의 100 %의 셀에만의 사업부를 될 것이라고 : 100 % 요소가 만약 내가 높이를 설정하여이 문제를 해결할 수있을 것입니다하지만

내가. 그러나 어떤 이유로 나는 셀에만 div의 높이를 지정하는 경우에만 작동하고, 그때에 관계없이 실제 내용의 동일한 문제 (모든 행과 동일한 높이를 가지고,

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

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

그러나 셀에만 div의 이후 포함 된 이미지를 사용하여 동적으로 커지면 실제로 높이를 참조하려고하는 높이 (태그의 경우 100 %)가 있지만 작동하지 않습니다. 여기, 그리고 어떻게해야합니까? 여기를 돌리기 전에 많은 시간을 할애합니다. 누군가가 황금 답을 얻었 으면합니다.

Answer 1

It 's 플로팅 대신 inline-block을 사용하는 것이 더 쉽습니다. 이런 식으로 뭔가 :

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

아니면 링크는 실제로 같은 높이가 필요합니까? 그런 (안 IE6 지원)는 "테이블"레이아웃을 시도 :

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