Question

你会看到伙计吗？我的每个图像底部都有一个带标题的标题栏。但是所有盒子的高度都不一样。所有我希望它在所有框中都是相同的高度，如果你翻滚，那么你会看到那个盒子滑动，这很好。它也将重新定位。我还在尝试，但无法弄明白。你会猜到我错了吗？我只是想做到完美。即使你有任何其他css或js那样的响应支持，请在这里发帖。

感谢

http://jsfiddle.net/BAVXH/

bellow是css for caption

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

如何修复div位置

2 个答案: