页脚右侧的 CSS 图像答案

【问题标题】：Css images on the right side of the footer页脚右侧的 CSS 图像
【发布时间】：2017-06-06 19:15:38
【问题描述】：

我正在尝试创建一个带有 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>

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

图片是否适合页脚的高度？
你可以试试：img { max-width:100%; } 或 img { 最大高度：100%； }。我相信调整一个维度的大小也会调整另一个维度的大小。取决于它们的原始尺寸，但它们可能看起来很奇怪（拉伸等）
我不明白为什么我的图片从页脚中消失了
能否请您提供一个小提琴或其他演示，其中包含与页脚大小相关的 css。
谢谢，我看到了正在发生的事情。图像的内部容器没有高度，因此可以这样设置： .images-container{height:inherit;} 以便获取页脚高度。然后图像可以适当地受益于 .images-container img {max-height: 100%;} （或 height: 100% 如果您希望它们填充）。这是一个更新的小提琴：jsfiddle.net/gskzo4hm（我希望链接正确打开）。

【解决方案2】：

您好，如果您使用的是引导框架，请尝试此代码

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

【讨论】：

【解决方案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>

【讨论】：

“a”元素的直接浮动将与标记相比颠倒它们的顺序。
是的。您必须在 HTML 中交换它们