如何在浮动时保持高度，并使用流体设计将背景悬停

Question

我的响应式布局存在一些问题。

1）更改屏幕宽度时，我的盒子上的高度差异。这可以用高度来修复吗？

2）我使用Jquery创建了一个悬停状态，使图像变暗。调整屏幕尺寸时，问题就出现了问题。无论容器的尺寸是什么，悬浮状态都可以适合图像吗？

请参考下面的图片和小提琴。

http://jsfiddle.net/rJTmb/

    /*  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;
    }
}

非常感谢!!!

Answer 1

我认为这篇文章可以帮助您，当您使用clearfix时，所有高度都会正确显示。

What is a clearfix?

干杯