具有 3 列的响应式 CSS 页脚

Question

我有这个带有媒体查询的 CSS 代码：

#footer-top {
    width:100%;
    height:480px;
    padding-top:10px;
    border-bottom:2px #000000 solid;
}
#footer-left {
    width: 290px;
    float: left;
    padding: 5px 15px;
    border-right:1px #000000 solid;
}
#footer-middle {
    width: 294px; /* Account for margins + border values */
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
    border-right:1px #000000 solid;
}
#footer-right {
    width: 270px;
    padding: 5px 15px;
    float: left;
}
#footer-bottom {
    clear: both;
    padding: 0 15px;
}

/* for 980px or less */
@media screen and (max-width: 980px) {
    #footer-left {
        width: 41%;
        padding: 1% 4%;
    }
    #footer-middle {
        width: 41%;
        padding: 1% 4%;
        margin: 0px 0px 5px 5px;
        float: right;
    }
    #footer-right {
        clear: both;
        padding: 1% 4%;
        width: auto;
        float: none;
    }
    #footer-bottom {
        padding: 1% 4%;
    }
}

/* for 700px or less */
@media screen and (max-width: 600px) {
    #footer-left {
        width: auto;
        float: none;
    }
    #footer-middle {
        width: auto;
        float: none;
        margin-left: 0px;
    }
    #footer-right {
        width: auto;
        float: none;
    }
}

/* for 480px or less */
@media screen and (max-width: 480px) {
    #footer-right {
        display: none;
    }
}

所以我试图让我的页脚响应较小的屏幕等。

我在这里创建了一个小提琴：http://jsfiddle.net/VMn7Y/，因此您也可以看到完整的 HTML，但是当您缩小屏幕尺寸时，页脚右侧 div 开始显示在页脚底部 div 上。我如何让它随着屏幕变小，底部的 div 将被推下？

Answer 1

补充我的评论以完成答案是从#footer-top示例中删除height:480px ---> http://jsfiddle.net/VMn7Y/17/

希望这就是你想要的！

Answer 2

首先，当您使用媒体查询时，如果您从较小的屏幕尺寸开始并逐步提高，则更容易获得更好的结果。

我已经修好了你的小提琴，基本上你需要做的就是将你的宽度更改为 30%（或者考虑到你的填充，在这种情况下为 27%）

在这里查看：

float:left;
padding: 5px 10px;
width:27%;

fixed jsfiddle