Question

我在CSS中使用这些媒体查询来使我的页脚响应。

我想让3栏（#footer-left，#footer-middle，#footer-right）在屏幕缩小时自动相互移动。

这样做的最佳方法是什么？我有一个小提琴：jsfiddle

/* 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;
        border-right:none;
    }
    #footer-right {
        padding: 1% 4%;
    }
    #footer-bottom {
        display:none;
    }
}

/* for 800px or less */
@media screen and (max-width: 780px) {
    #footer-left {
        border-right:none;
    }
    #footer-middle {
        margin-left: 0px;
        border-right:none;
    }
}

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

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

Answer 1

当您希望它们堆叠时，只需将#footer-left，#footer-middle和#footer-right div设为width:100%，并在每个div上加float:none。如果你在任何div上保持填充，你的宽度可能需要小于100％（在你的情况下，宽度将是92％，因为你已经在每个div的左右两侧设置了4％的填充）。

如何使我的3列CSS页脚响应

1 个答案: