我的圖標在我的頁腳右側浮動

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/