如何实现内层div对齐固定，避免内容增多时位置偏移

你当前的绝对定位div仅通过right:10%定位，但默认文本左对齐，且宽度随内容自适应。当文本增多时，div会向左延伸，导致视觉上位置“偏移”。要让div位置固定，同时文本在内部换行，可通过以下两种方式调整：

方案1：设置文本右对齐 #

给绝对定位的div添加text-align: right，这样文本会靠右排列，新增内容会向左换行，div的右侧始终固定在父容器的10%位置，不会整体偏移。

修改后的代码示例：

<div style="position: relative">
  <img src="" style="min-height: 100px;" width="100%">
  <div style='position: absolute; top: 10%; right: 10%; text-align: right;'>
    <h1>text1 2 3 4 5 6 </h1>
    <div>text2 3 4 5 6</div>
    <a>link text</a>
  </div>
</div>

方案2：固定div宽度并允许文本换行 #

如果需要文本左对齐但不偏移，可给绝对定位的div设置max-width（或固定width），同时添加word-wrap: break-word强制文本换行，确保div宽度不随内容无限扩展，右侧位置保持固定。

修改后的代码示例：

<div style="position: relative">
  <img src="" style="min-height: 100px;" width="100%">
  <div style='position: absolute; top: 10%; right: 10%; max-width: 200px; word-wrap: break-word;'>
    <h1>text1 2 3 4 5 6 </h1>
    <div>text2 3 4 5 6</div>
    <a>link text</a>
  </div>
</div>

若需要兼顾固定位置和排版灵活性，也可以结合两种方案：设置max-width+text-align: right，既限制div宽度，又让文本靠右换行。

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