Как исправить положение div

Question

Вы бы видели ребята. у каждого моего нижнего изображения есть одна панель заголовка с заголовком. но это не одинаковая высота для всей коробки. все, что я хочу, будет одинаковой высоты во всей коробке, и если вы опрокинете, вы увидите, что это слайд-окно коробки отлично. также он будет resposive. я все еще пытаюсь, но не могу это понять. вы бы догадались, где я ошибаюсь. Я просто хочу сделать это идеально. даже если вы любой другой css или js, как это, с отзывчивой поддержкой, тогда напишите здесь, пожалуйста.

благодаря

http://jsfiddle.net/BAVXH/

ниже является CSS для заголовка

.box { 
    float: left; 
    border: 1px solid #FFF; 
    margin: 2px; 
    position: relative; 
    overflow: hidden; 
    background-color: #F00; 
} 
.box img { 
    position:relative; 
    left: 0; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 
.box .caption { 
     background-color: rgba(0, 0, 0, 0.8); 
     position: absolute; 
     color: #fff; 
     z-index: 100; 
     -webkit-transition: all 300ms ease-out; 
     -moz-transition: all 300ms ease-out; 
     -o-transition: all 300ms ease-out; 
     -ms-transition: all 300ms ease-out; 
     transition: all 300ms ease-out; 
     left: 0; 
     text-align: left; 
     padding: 2%; 
     top: 92%; 
     height:96%; 
    } 
    .box:hover .caption { 
     -moz-transform: translateY(-89%); 
     -o-transform: translateY(-89%); 
     -webkit-transform: translateY(-89%); 
     opacity: 1; 
     transform: translateY(-89%); 
    } 

Answer 1

Вы могли бы использовать что-то подобное с JQuery и подсчитайте вершину для каждого заголовка.

for(i=0;i<8;i++){ 
var h = $('.col-'+i).height(); 
$('.col-'+i).find(".caption").css("top",h-25 + "px"); 
} 

Надеюсь, это даст вам представление.

Answer 2

высота положить в рх не в%, как

.box .caption { 
    background-color: rgba(0, 0, 0, 0.8); 
    position: absolute; 
    color: #fff; 
    z-index: 100; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
    left: 0; 
    text-align: left; 
    padding: 2%; 
    top: 92%; 
    height:100px; 
}