如何保持浮動和背景懸浮與流體設計時的高度

1）在更改屏幕寬度時，我的盒子上有高度差異。這可以用高度固定嗎？

2）我創建了一個懸停狀態使用JQuery，給圖像一個更黑的BG。調整屏幕尺寸時，問題很嚴重。無論容器的尺寸如何，懸停狀態是否適合圖像？

請參考下面的圖片和小提琴。

/* CHART IT BTN ON POTS 
    ===================================================================*/ 
    $(".display-box").hover(function() { 
     $(this).find(".charthis-btn").show(); 
     $(this).find(".hover-mask").fadeIn(); 
    }, function() { 
     $(this).find(".charthis-btn").hide(); 
     $(this).find(".hover-mask").fadeOut(); 
    }) 
@media screen and (min-width: 460px) { 
    #upload-container ul li { 
     float: left; 
     margin-right: -100%; 
     width: 42.08%; 
    } 
    #upload-container ul li span { 
     padding-bottom: 10px; 
    } 
    #upload-container ul li:nth-child(2n+1) { 
     margin-left: 0%; 
     margin-bottom: 3.85%; 
     clear: both; 
     overflow: hidden; 
     *zoom: 1; 
    } 
    #upload-container ul li:nth-child(2n+2) { 
     margin-left: 51.93%; 
     margin-bottom: 3.85%; 
     clear: none; 
    } 
} 
@media screen and (min-width: 600px) { 
    #upload-container ul li { 
     float: left; 
     margin-right: -100%; 
     width: 27.73%; 
    } 
    #upload-container ul li span { 
     padding-bottom: 10px; 
    } 
    #upload-container ul li:nth-child(3n+1) { 
     margin-left: 0%; 
     margin-bottom: 3.85%; 
     clear: both; 
     overflow: hidden; 
     *zoom: 1; 
    } 
    #upload-container ul li:nth-child(3n+2) { 
     margin-left: 34.29%; 
     margin-bottom: 3.85%; 
     clear: none; 
    } 
    #upload-container ul li:nth-child(3n+3) { 
     margin-left: 68.59%; 
     margin-bottom: 3.85%; 
     clear: none; 
    } 
} 
@media screen and (min-width: 900px) { 
    #upload-container ul li { 
     float: left; 
     margin-right: -100%; 
     width: 20.8%; 
    } 
    #upload-container ul li span { 
     padding-bottom: 0px; 
    } 
    #upload-container ul li:nth-child(4n+1) { 
     margin-left: 0%; 
     margin-bottom: 3.85%; 
     clear: both; 
     overflow: hidden; 
     *zoom: 1; 
    } 
    #upload-container ul li:nth-child(4n+2) { 
     margin-left: 25.96%; 
     margin-bottom: 3.85%; 
     clear: none; 
    } 
    #upload-container ul li:nth-child(4n+3) { 
     margin-left: 51.93%; 
     margin-bottom: 3.85%; 
     clear: none; 
    } 
    #upload-container ul li:nth-child(4n+4) { 
     margin-left: 77.89%; 
     margin-bottom: 3.85%; 
     clear: none; 
    } 
}

非常感謝！ There is a height difference on responsive -needs to be fixed Hover states are out of line when screen changes