頁腳右側的Css圖像

我正在嘗試創建一個鏈接到頁面的2個圖像的頁腳。頁腳右側的Css圖像

這兩個鏈接/圖片應保留在頁腳的右側。

圖片應該彼此相鄰並留有一點空白。

如何管理這與CSS？

<footer> 
    <a href="http://www.google.de/" target="_blank"> 
     <img src="test.jpg" alt="logo.jpg"> 
    </a> 
    <a href="http://www.google.de" target="_blank"> 
     <img src="test.jpg" alt="logo.jpg"> 
    </a> 
</footer>

來源

2017-06-06 Micheasl

總結他們在一個div和浮起來。

CSS：

.images-container { 
    float: right; 
} 

.images-container a { 
    margin-left: 5px; 
}

HTML：

<footer> 
<div class="images-container"> 
    <a href="http://www.google.de/" target="_blank"> 
     <img src="test.jpg" alt="logo.jpg"> 
    </a> 
    <a href="http://www.google.de" target="_blank"> 
     <img src="test.jpg" alt="logo.jpg"> 
    </a> 
</div> 
</footer>

來源

2017-06-06 11:14:54

是否有可能塔t圖像是否適合頁腳的高度？ – Micheasl

您可以嘗試：img {max-width：100％; }或img {max-height：100％; }。我相信調整一個也會調整其他方面。根據他們的原始大小，但他們可能看起來很奇怪（拉伸等） –

我不明白我的圖像走出頁腳 – Micheasl

您好，如果您使用的引導框架試試這個代碼

HTML

<footer class="clearfix"> 
    <ul class="links pull-right"> 
    <li> <a href="http://www.google.de/" target="_blank"> 
     <img src="test.jpg" alt="logo.jpg"> 
    </a> 
    </li> 
    <li> 
    <a href="http://www.google.de" target="_blank"> 
     <img src="test.jpg" alt="logo.jpg"> 
    </a> 
     </li> 
    </ul> 
</footer>

CSS

.links 
{ 
    list-style-type:none; 
    padding:0; 
} 
.links li 
{ 
    display:inline-block; 
}

來源

2017-06-06 11:14:13

您可以使用float：適合你的超鏈接

footer a { 
 
float:right; 
 
} 
 
footer a:first-child { 
 
margin-left: 10px; 
 
}

<footer> 
 
    <a href="http://www.google.de/" target="_blank"> 
 
     <img src="http://placehold.it/50" alt="logo.jpg"> 
 
    </a> 
 
    <a href="http://www.google.de" target="_blank"> 
 
     <img src="http://placehold.it/50" alt="logo.jpg"> 
 
    </a> 
 
</footer>

來源

2017-06-06 11:15:38 Gerard

與標記相比，「a」元素的直接浮動將顛倒它們的順序。 –

是的。你將不得不在HTML中交換它們 – Gerard

頁腳右側的Css圖像

回答

相關問題