我正在为这个元素使用视口(viewport)，以便做出响应。
我想在右上角有一个头像来显示用户头像，一个绿色圆圈表示他在线。
问题是我无法使圆圈响应 如果我增加或减少圆圈的大小，圆圈就会移动。几张图片:
大
小
HTML:
<body>
<img class="img-header" src="https://images.vexels.com/media/users/3/129616/isolated/preview/fb517f8913bd99cd48ef00facb4a67c0-businessman-avatar-silhouette-by-vexels.png">
<p>Username</p>
<img class="online" src="http://www.clker.com/cliparts/e/E/F/G/p/g/alex-green-circle-md.png">
</body>
CSS:
.img-header {
position: relative;
margin-top: 0vw;
margin-right: 4vw;
float: right;
object-fit: cover;
border-radius:50%;
width: 7vw;
height: 7vw;
}
p{
float: right;
text-transform: bold;
margin-top: 1vw;
margin-right: 2vw;
display: inline;
font-size: 4vw;
}
.online {
width: 2vw;
position: absolute;
padding-left:92vw;
}
最佳答案
用 div 包裹图像和绿色图标图像，然后添加 right 和 top 而不是 padding > 绿色图标的值。
现在无论大小都会在同一个地方，代码如下:
.img-header {
position: relative;
margin-top: 0vw;
margin-right: 4vw;
float: right;
}
.img {
width: 7vw;
height: 7vw;
border-radius: 50%;
object-fit: cover;
vertical-align: super;
}
p {
float: right;
text-transform: bold;
margin-top: 1vw;
margin-right: 2vw;
display: inline;
font-size: 4vw;
}
.online {
width: 2vw;
position: absolute;
right: 0;
top: 0;
}<body>
<div class="img-header">
<img class="img" src="https://images.vexels.com/media/users/3/129616/isolated/preview/fb517f8913bd99cd48ef00facb4a67c0-businessman-avatar-silhouette-by-vexels.png">
<img class="online" src="http://www.clker.com/cliparts/e/E/F/G/p/g/alex-green-circle-md.png">
</div>
<p>Username</p>
</body>这是更新的JSfiddle .
关于css - 在线-带视口(viewport)的头像图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47570203/