我有这个代码:
<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 代码吗?
最佳答案
首先 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>
关于html - 如何在横幅图片后面放置一个可点击的图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48369815/