如何实现图文并排效果 移动文本时文本随机消失怎么办

• 父元素.profile同时写了position: absolute和float: right，属于无效写法：元素一旦设置绝对定位就会完全脱离普通文档流，float属性直接不生效，冗余的属性会干扰布局判断。
• 头像图片单独设置了绝对定位，脱离父容器的正常排版流，旁边的h2文本没有稳定的排版参照，调整位置时很容易滑出可视区域、或者被其他层级的元素遮挡，就会出现所谓随机消失的情况。
• 现有写法靠写死right: 160px这种硬偏移值凑位置，适配性极差，只要文本长度、容器尺寸稍微变一点就会错位。

直接用Flex弹性布局实现图文并排，不需要给子元素加绝对定位，所有元素都在正常排版流里，从根源上避免元素莫名消失的问题：

.profile {
  position: absolute;
  top: 0;
  right: 0;
  /* 开启flex布局，让内部图片、文字自动并排 */
  display: flex;
  /* 让图片和文字垂直居中对齐 */
  align-items: center;
  /* 控制图片和文字之间的间距，按需调整数值即可 */
  gap: 12px;
  color: white;
  margin: 0;
}

.profile img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 删除之前给img加的position、top、right属性，不需要硬凑偏移 */
}

HTML结构不需要做任何修改，保持原有写法即可：

<div class="profile">
  <img src="本地头像路径" alt="profile">
  <h2>ASPECTER</h2>
</div>

后续如果要调整整个个人信息模块的位置，只需要修改父容器.profile的top、right值就行；调整图文间距改gap数值即可，不会再出现文本消失、错位的问题。

内容的提问来源于stack exchange，提问作者Aspecter