html - 其他图像右上角的图像?
问题描述
我尝试了以下html:
<div style="text-align: center;">
<a href="https://example.com">
<img src="image.png">
</a>
<a href="https://example2.com" style="top: 0px; right: 0px;">
<img src="logo.png" style="width: 20px; height: 20px;" />
</a>
</div>
我试图完成的是第二个包含图像的链接元素位于第一个图像的右上角。但是,较小的图像保留在另一个图像的外侧。有没有什么可能的方法可以用相同的布局来完成?如果没有,那么请告诉我如何使它工作。
解决方案
@TheMaleBeyonce 的答案是正确的。对于您当前的布局,您应该确保该div
元素仅用于包围外部图像,并确保 的宽度div
等于外部图像。
假设外图宽度为200px,正确代码如下:
<style>
.wrap {
position: relative;
width: 200px;
}
.inner {
position: absolute;
top: 0;
right: 0;
}
</style>
<div class="wrap">
<a href="https://example.com">
<img src="image.png">
</a>
<a class="inner" href="https://example2.com">
<img src="logo.png">
</a>
</div>
推荐阅读
- python - Flask main.css 文件不适用于 base.html 文件
- angular - Angular HttpClient如何通过共享回复重复http请求
- c++ - UWP 在 InitializeComponent() 处崩溃 [C++]
- fullcalendar - FullCalendar GCal ResourceIDs 查询
- sqlite - 改进时间戳(纪元)之间的查询结果
- kubernetes - Kubernetes 中每个部署的命名空间
- c - make 中未定义的引用
- git - 如何在 Git/SVN 中合并多个文件的历史记录
- python - 使用 Pillow Image.open 遍历文件夹
- macros - Coq:定义白话以避免重复