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

【问题标题】：Floating and element to the right at the bottom of footer页脚底部右侧的浮动和元素
【发布时间】：2013-10-10 04:52:59
【问题描述】：

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

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

我能做到这一点的唯一方法是手动添加一个像这样的全宽边距：

.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;
}

结果是这样的：

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

.footerlogo img {

    float: right;

}

问题是如果我采取浮动：对；关闭徽标 div 并保持浮动：对；在社交图标条上，社交图标条现在将位于徽标位置，徽标向后移动。因此：

任何人都可以指导我将社交图标（图像中的红色元素）粘贴到右下角并让我知道如何实现这一点，因为使用浮动权利的正常方式不会让它浮动到右下角，只到 logo 的位置。

【问题讨论】：

你能给我看看你网站的链接并显示完整的代码吗
float:left 和 float:right 总是会出问题为什么不使用clearfix hack css-tricks.com/snippets/css/clear-fix

标签： html css

【解决方案1】：

尝试将right 属性设置为0，这应该使元素与最近定位的父元素的右边缘对齐：

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

【讨论】：

它可以在右下角获取图标，但是当我调整浏览器的大小时，它最终会来回移动图标。此外，右侧最外面的图标不与上方徽标的右边缘对齐。除此之外，它是这里唯一可行的解决方案（有点）。
@user1632018 您能否在jsfiddle 中向我们提供您的问题的可重现示例？
您好考拉，提前感谢您的帮助。 Here is the jsfiddle。由于它是一个使用主题定制器的 wordpress 主题，我不得不进行一些更改以删除 wp 设置字符串并手动重新添加 html。
我忘了提到我有一个额外的标题导航类/子类，由于某种原因，它在 jsfiddle 中使用那个而不是页脚导航类，所以徽标和导航菜单是相反的.这是一个没有删除导航类的 js fiddle。 jsfiddle..谢谢一百万:)
@user1632018 这对你有用吗jsfiddle.net/koala_dev/XWeZF/7/show？不要粗鲁，但你有一种固定宽度和浮动的混乱

【解决方案2】：

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

【讨论】：

【解决方案3】：

将页脚主 div 给 position:relative

并将社交图标 div 赋予position:absolute 并赋予左侧和顶部的值

【讨论】：