Плавающие мои значки справа в моем нижнем колонтитуле

Question

У меня проблема .. Я пытаюсь сделать свой нижний колонтитул, но это не очень хорошо.

Логотип с логотипом, год и мое имя находятся слева, а социальные значки - справа. Я не могу решить эту проблему! ; (Я не могу плавать вправо

Если кто-то знает, как это работает, пожалуйста, реагировать: D

footer { 
 
    width: 100%; 
 
    height: 50px; 
 
    clear: both; 
 
    background-color: #303030; 
 
    color: #868686; 
 
    position: relative; 
 
} 
 
footer span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 50px; 
 
} 
 
.footerwidth { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.icons { 
 
    float: right; 
 
    width: 150px; 
 
}

<footer> 
 

 
    <div class="footerwidth"> 
 
    <span>&copy 2016 Jasper Mulder 
 
     <div class="icons"> 
 
     <a href="#"><img src="../images/icons/facebook.png"></a> 
 
     <a href="#"><img src="../images/icons/instagram.png"></a> 
 
     <a href="#"><img src="../images/icons/linkedin.png"></a> 
 
     </div> 
 
     </span> 
 
    </div> 
 

 
</footer>

Спасибо за помощь мне

Answer 1

.!

Измените свой HTML-код и поместите социальные значки до диапазона авторских прав:

<footer> 
    <div class="footerwidth"> 
    <div class="icons"> 
     <a href="#"><img src="../images/icons/facebook.png"></a> 
     <a href="#"><img src="../images/icons/instagram.png"></a> 
     <a href="#"><img src="../images/icons/linkedin.png"></a> 
    </div> 
    <span>&copy 2016 Jasper Mulder</span> 
    </div> 
</footer> 

Answer 2

Двигайте .icons DIV вне <span>, а также добавить float: left размаху:

footer { 
 
    width: 100%; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    clear: both; 
 
    background-color: #303030; 
 
    color: #868686; 
 
    position: relative; 
 
} 
 
footer span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 50px; 
 
    float: left; 
 
} 
 
.footerwidth { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.icons { 
 
    float: right; 
 
    width: 150px; 
 
}

<footer> 
 

 
    <div class="footerwidth"> 
 
    <span>&copy 2016 Jasper Mulder</span> 
 
    <div class="icons"> 
 
     <a href="#"> 
 
     <img src="../images/icons/facebook.png"> 
 
     </a> 
 
     <a href="#"> 
 
     <img src="../images/icons/instagram.png"> 
 
     </a> 
 
     <a href="#"> 
 
     <img src="../images/icons/linkedin.png"> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
</footer>

Я также добавил line-height: 50px; как маленький бонус;)

Answer 3

Во-первых, вы должны исправить разметка, поскольку <div> не разрешен в <span>.

Тогда вам нужно просто поплавать в поле для защиты авторских прав слева, а значки справа и clear the floats на контейнере.

Для вертикального центра вы можете просто применить такое же количество верхнего и нижнего отступов.

https://jsfiddle.net/pnjL5phb/

footer { 
 
    padding: 20px; 
 
    clear: both; 
 
    background-color: #303030; 
 
    color: #868686; 
 
    overflow: hidden; 
 
} 
 
footer span { 
 
    float: left; 
 
} 
 
.icons { 
 
    float: right; 
 
}

<footer> 
 
    <div class="footerwidth"> 
 
    <span>&copy; 2016 Jasper Mulder</span> 
 
    <div class="icons"> 
 
     <a href="#"><img src="../images/icons/facebook.png"></a> 
 
     <a href="#"><img src="../images/icons/instagram.png"></a> 
 
     <a href="#"><img src="../images/icons/linkedin.png"></a> 
 
    </div> 
 
    </div> 
 
</footer>

Answer 4

Здесь вы идете, есть много решений.

footer span { 
position:relative; 
top:15px; 
left:-110px; 
height: 50px; 
} 

Не используйте таблицу для раскладки.

http://codepen.io/damianocel/pen/BjdWWq

Answer 5

CSS должно быть:

.footerwidth { 
    width: 80%; 
    margin: 0px auto; 
    PADDING-TOP: 15PX; 
} 
footer span { 
    display: inline-block; 
    height: 50px; 
} 
.icons { 
    float: right; 
    HEIGHT: 50PX; 
    width: 150px; 
} 

HTML должен быть:

<div class="footerwidth"> 
    <span>© 2016 Jasper Mulder</span> 
    <div class="icons"> 
     <a href="#"><img src="../images/icons/facebook.png"></a> 
     <a href="#"><img src="../images/icons/instagram.png"></a> 
     <a href="#"><img src="../images/icons/linkedin.png"></a> 
    </div> 
</div> 

Демо: https://jsfiddle.net/9n4cav1o/

Answer 6

Вот jsFiddle для вашей проблемы. Пожалуйста, пройдите через него. https://jsfiddle.net/dhqp3Ln5/