浮动和页脚底部右侧的元素

时间:2013-10-10 04:52:59

标签: html css html5 css3

我遇到一个问题,在我正在制作的wordpress主题上向页脚添加一些社交图标。问题是我无法让图标浮动页脚的右下角。

这是我想要实现的目标:灰色元素是存在的,红色元素是社交图标条,我想将其添加到其中。

enter image description here

我能实现这一目标的唯一方法是手动添加一个像这样的全宽度的边距:

.social-icons {
    padding: 0!important;
    margin-left:864px;
    list-style-type: none!important;
        position:absolute;
        bottom:0;

}

问题在于,当调整窗口大小时,社交图标就会到处都是。我知道浮右会很好,但问题是它没有。

如果我试试这个:

.social-icons {
        padding: 0!important;
        list-style-type: none!important;
        position:absolute;
        bottom:0;
        float:right;
}

最终结果如下:

enter image description here

标题为logo的元素已经使用了float:right;所以这可能与它有关。这是徽标div:

.footerlogo img {

    float: right;

}

问题是如果我拿浮标:对;关闭徽标div并保持浮动:正确;在社交图标条上,社交图标条现在将处于徽标位置,徽标向后移动。就这样:

enter image description here

任何人都可以指导我将社交图标(图像中的红色元素)粘贴到右下角,让我知道如何实现这一点,因为正常使用浮动的方式不会让它浮动到右下角,仅限于徽标位置。

3 个答案:

答案 0 :(得分:2)

尝试将right属性设置为0,这会使元素与最近定位父级的右边缘对齐:

.social-icons {
    padding: 0!important;
    list-style-type: none!important;
    position:absolute;
    bottom:0;
    right: 0;
}

答案 1 :(得分:0)

尝试将.social-icons放在div中表示父级,并使父级div向右浮动; float属性永远不会与绝对定位一起使用。

答案 2 :(得分:0)

将页脚主div赋予position:relative

并将社交图标div提供给position:absolute,并为左侧和顶部提供值