jquery - 如何通过流畅的设计在浮动和背景悬停时保持高度

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 时，所有高度都会正确显示。

什么是清除修复？

干杯