2013-10-10 3 views
2

У меня возникла проблема с добавлением социальных значков в нижний колонтитул на тему Wordpress, которую я делаю. Проблема в том, что я не могу заставить значки плавать в нижнем правом углу нижнего колонтитула.Плавающий и элемент справа внизу нижнего колонтитула

Вот что я пытаюсь добиться: серые элементы существуют, а красный элемент - это социальная полоса значков, куда я хочу добавить ее.

enter image description here

Единственный способ, которым я могу достигнуть этого вручную добавить запас, который является полной ширины, как это:

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

} 

Проблема в том, что при изменении размеров окна, социальная иконки повсюду. Я знаю, что float right будет работать отлично, но проблема в том, что это не так.

Если я пытаюсь это:

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

Он заканчивается так:

enter image description here

Элемент под названием логотип уже используется поплавок: право; так что, возможно, что-то с этим связано. Вот логотип div:

.footerlogo img { 

    float: right; 

} 

Дело в том, что я беру поплавок: справа; выключить логотип и сохранить float: right; на социальной полосе иконки, социальная полоса значков теперь будет находиться в позиции логотипа, с возвратом логотипа. Таким образом:

enter image description here

Может кто-нибудь вести меня в направлении наклеивания социальных иконок (красный элемент в изображении) в нижнем правом углу и дайте мне знать, как я могу сделать это, так как нормальный способ использование float right не позволит ему плавать в нижнем правом углу, только до положения логотипа.

+0

может у показать мне ссылку на ваш сайт и показать полный код –

+0

'поплавка: left' и 'float: right' делает всегда возникающую проблему, почему вы не используете' clearfix' hack http://css-tricks.com/snippets/css/clear-fix/ –

ответ

2

Попробуйте установить right свойство 0, что должно сделать элемент выравнивания по правому краю ближайшего расположенного родителя:

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

Он работает, чтобы получить значки в правом нижнем углу угол, но когда я изменяю размер браузера, он заканчивает перемещение значков взад и вперед. Кроме того, самый внешний значок справа не выравнивается с правым краем логотипа над ним. Кроме того, это единственное решение, которое работает (несколько). – user1632018

+0

@ user1632018 Можете ли вы предоставить нам воспроизводимый пример вашей проблемы в [jsfiddle] (http://jsfiddle.net)? –

+0

Привет, Коала, заранее за помощь. [Вот jsfiddle] (http://jsfiddle.net/XWeZF/2/). Поскольку это тема WordPress, в которой используется редактор тем, мне пришлось внести некоторые изменения, чтобы удалить строки настроек wp и повторно добавить html вручную. – user1632018

0

Попробуйте положить .social-иконку в DIV говорит родитель и сделать родитель div float right; Свойство float никогда не работает с абсолютным позиционированием.

0

Дайте Footer главных дела до position:relative

и дать социальные значок дела до position:absolute и дать значение для левых и верхнего

Смежные вопросы