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");
}

希望这能给你一个想法。

Answer 2

将高度放在 px 中而不是 % 中

.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;
}