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

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设置为您的父元素。

Stack Snippet

.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>