Question

我正在尝试创建一个包含链接到页面的2个图像的页脚。

两个链接/图像应保留在页脚的右侧。

图像应该以较小的余量彼此相邻。

如何使用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>

Answer 1

将它们包裹在一个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>

Answer 2

嗨，如果您使用的是bootstrap框架，请尝试使用此代码

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;
}

Answer 3

您可以使用float：right来表示超链接

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>

页脚右侧的Css图像

3 个答案: