html - 带有响应式 css 的 CSS 页脚

Question

我正在尝试用这个 CSS 创建一个 CSS 页脚：

.footer {
    width:100%;
    background:#666666;
    clear:both;
    color:#FFFFFF;
}

.footer-container {
    display:inline-block;
    width:80%;
    margin: 0 auto 0 auto;
}

.social_links {
    float:left;
    list-style:none;
    display:inline;
}

.footer_text {
    text-align:center;
}

.footer_logo {
    float:right;
}

我想要 3 列，左侧相当小，仅用于彼此相邻显示的 facebook 和 twitter 社交图标（内联），中间列用于文本，以便更大，然后右侧仅用于小徽标

我也试图让它响应，以便页面变小，它按顺序排列：- 左栏（社交链接）/中间栏（文本 - 对齐中心）/底部的徽标

这是我目前拥有的东西，但我无法让它像上面那样工作。

http://jsfiddle.net/eYwsm/1/

Answer 1

我会使用媒体查询（http://css-tricks.com/snippets/css/media-queries-for-standard-devices/）并将元素显示从内联更改为以一定宽度阻塞。例如，在你的 CSS 中使用它

@media screen and (max-width: 480px)
{
    .social_links, .footer_logo
    {
        display: block;
    }
}

Answer 2

如果您不希望列成为移动大小的行，这将达到目的：

http://jsfiddle.net/eYwsm/2/

.footer_text 具有overflow: hidden因此它将占用浮动元素之间的剩余空间。