如何修復div位置

你會看到傢伙嗎？我的每個圖像底部都有一個帶標題的標題欄。但是對於所有的盒子來說這個高度不一樣所有我想要它會在所有框中的相同高度，如果你翻轉，那麼你會看到那個盒子滑動，很好。也會抵消。我仍然在嘗試，但無法想象它。你會猜猜看到我錯誤的地方嗎？我只是想讓這個完美。即使你有任何其他的css或js那樣的響應式支持，那麼請在這裏發帖。如何修復div位置

感謝

http://jsfiddle.net/BAVXH/

波紋管是用於說明在PX

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

來源

2013-10-24 Accore LTD

我還沒有得到你的觀點??。 –

問題在於使用百分比（％），如果使用'px'，'.caption'可以具有相同的'height'。 – maketest

你可以使用像這樣使用jQuery和計算每個標題的頂部。

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

希望這給你一個想法。

來源

2013-10-24 11:48:41

或者你可以把它放在一個函數中，每次mouseleaves圖像時只需調用它並只計算特定標題的頂部。 –

非常感謝你..這幾乎是很好的工作 –

放高度的CSS不會在％喜歡

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

來源

2013-10-24 11:48:37 anand4tech

如何修復div位置

回答

相關問題