浮动和元素在页脚底部的右侧 [英] Floating and element to the right at the bottom of footer

问题描述

我有一个问题添加一些社交图标到页脚上我所做的wordpress主题。问题是我无法得到浮动页脚右下角的图标。

这是我想要的东西：灰色元素是现有的，红色元素是我要添加到其中的社交图标条。

我可以实现的唯一方法是手动添加一个全宽像素这样的边距： / p>

  .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;所以这可能与它有关。这里是logo div：

  .footerlogo img {
 
 float：right; 
 
} 
  

关闭标志div并保持浮动：right;在社交图标条上，社交图标条现在将处于徽标位置，徽标移回。因此：

p>

任何人都可以指导我将社交图标（图像中的红色元素）粘贴到右下角，让我知道如何完成这一点，因为正常的方式

解决方案

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

  .social-icons {
 padding：0！important; 
 list-style-type：none！important; 
 position：absolute; 
 bottom：0; 
右：0; 
} 
  

I am having an issue adding some social icons to the footer on a wordpress theme I am making. The problem is that I cannot get the icons to float the the bottom right corner of the footer.

Here is what I am trying to acheive: The grey elements are existing, and the red element is the social icon strip, where I want to add it to.

The only way I can achieve this is to manually add a margin that is the full width like this:

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

}

The problem with this is that when the window is resized the social icons are all over the place. I know float right would work great but the problem is that it doesn't.

If I try this:

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

It ends up like this:

The element titled logo already uses float:right; so that may have something to do with it. Here is the logo div:

.footerlogo img {

    float: right;

}

The thing is if I take the float:right; off the logo div and keep the float:right; on the social icon strip, the social icon strip will now be in logos position, with logo moved back. As such:

Can anyone guide me in the direction of sticking the social icons(red element in image) into the bottom right corner and let me know how I can accomplish this, since the normal way of using float right wont allow it to float to the bottom right, only to the logos position.

解决方案

Try setting the right property to 0, that should make the element align to the right edge of the closest positioned parent:

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

这篇关于浮动和元素在页脚底部的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！