如何实现图片旁竖排文字随图片位置同步移动？

原实现失效的核心是：p标签和蓝色块为同级兄弟元素，旋转+位移的偏移值是硬编码的固定像素，p的位置基准是自身在正常文档流的默认位置，和蓝色块的位置没有绑定关系，因此修改蓝色块边距时，文字不会跟随同步移动。

方案1：定位绑定（最稳定，无需在调整边距时同步修改参数） #

将蓝色块设置为定位上下文，文字作为蓝色块的子元素通过绝对定位固定在侧边，所有偏移都相对于蓝色块自身计算，无论怎么调整蓝色块的margin、位置属性，文字都会自动跟随。

代码实现 #

CSS部分：

.blue {
  margin-top: 50px;
  margin-left: 10px;
  background-color: darkslateblue;
  width: 200px;
  height: 200px;
  /* 给内部绝对定位元素提供定位基准 */
  position: relative;
}

.blue p {
  margin: 0;
  position: absolute;
  /* 定位到蓝色块左侧，垂直居中 */
  left: -24px;
  top: 50%;
  /* 旋转文字，修正旋转中心实现完美居中 */
  transform: rotate(-90deg) translateY(-50%);
  transform-origin: left top;
  /* 防止文字意外换行 */
  white-space: nowrap;
}

HTML部分：

<div>
  <div class="blue">
    <p>Blue</p>
  </div>
</div>

• 优势：不需要手动计算偏移量，文字位置和蓝色块强绑定，蓝色块位置变动时文字零成本跟随，适配性最强。

方案2：Flex布局（无需嵌套DOM结构） #

如果不想修改DOM层级（不想把p放到蓝色块内部），可以给两个元素的共同父容器设置弹性布局，让两个元素成为弹性子项自动对齐，容器整体移动时两个元素会同步位移。

代码实现 #

CSS部分：

.img-wrap {
  /* 原蓝色块的margin移到父容器上 */
  margin-top: 50px;
  margin-left: 10px;
  /* 弹性布局实现自动对齐 */
  display: inline-flex;
  align-items: center;
  /* 控制文字和蓝色块的间距 */
  gap: 8px;
}

.blue {
  background-color: darkslateblue;
  width: 200px;
  height: 200px;
}

.img-wrap p {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap;
}

HTML部分：

<div class="img-wrap">
  <p>Blue</p>
  <div class="blue"></div>
</div>

• 优势：DOM结构更扁平，不需要嵌套，调整边距只需要修改父容器的margin属性即可，两个元素会同步移动。

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