html - 如何在横幅图片后面放置一个可点击的图标？

Question

我有这个代码:

<div align="center"><img src="http://via.placeholder.com/350x44" width="100%" height="44">
  <div align="right">
    <a href="fb.com/mypage"><img src="http://via.placeholder.com/20x22" width="22" height="20"></a>
    <div align="right">
      <a href="twitter.com/mypage"><img src="http://via.placeholder.com/20x22" width="22" height="20"></a>
    </div>
  </div>
</div>

看起来像:

但在我的成就中，我喜欢它看起来像这样的图像:

谁能给我简单的 css 代码吗？

Answer 1

首先 HTML5 不支持 align 属性。请改用 CSS。

您可以使用 position:absolute 来右对齐您的图像。请记住将 position:relative 设置为您的父元素。

堆栈片段

.main {
  position: relative;
}

.right {
  position: absolute;
  right: 0;
  top: 0;
}

.right img {
  display: block;
  border: 1px solid red;
}

<div class="main">
  <img src="http://via.placeholder.com/350x44" width="100%" height="44">
  <div class="right">
    <a href="fb.com/mypage"><img src="http://via.placeholder.com/20x22" width="22" height="20"></a>
    <a href="twitter.com/mypage"><img src="http://via.placeholder.com/20x22" width="22" height="20"></a>
  </div>
</div>