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://jsfiddle.net/eYwsm/2/

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

Answer 2

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

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

具有响应性CSS的CSS页脚

2 个答案: