html - 如何固定div位置

Question

你会看到伙计们吗？我的每张图片底部都有一个带标题的标题栏。但所有盒子的高度都不一样。我只希望它在所有盒子中的高度相同，如果你翻转，那么你会看到那个盒子向上滑动，这很好。它也会有反应。我仍在尝试，但无法弄清楚。你能猜到我错在哪里吗？我只是想让它变得完美。即使您有任何其他具有响应式支持的 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");
}

希望这能给你一个想法。