移动端/小窗口浏览器文本排版错乱问题修复咨询

嘿，我看了你的问题和给出的CSS代码，问题根源很明显——你给#text加了position:absolute，这玩意儿会让文本块直接脱离正常的文档流，完全不和旁边的figure保持布局关联。当屏幕缩到手机尺寸时，空间不够，绝对定位的文本就会“飘”到图片或者下一段上面，出现你说的偏移重叠问题。

给你几个靠谱的修复方案，按需选择：

• 最直接的修复：移除绝对定位
  把#text的position:absolute删掉，让它回到正常文档流里，这样它会和inline-block的figure自然排列，小屏幕空间不够时会自动换行，不会再重叠：

  #text{
    display:inline-block;
    /* 删掉 position:absolute 这一行 */
    margin:10px 0px;
    /* 保留你原来的其他样式 */
  }
  

• 更灵活的流式布局：用Flexbox
  如果想在大屏幕上让图片和文本横向排列，小屏幕自动换行，给它们的父容器加个flex布局，比inline-block更可控：

  /* 给figure和#text共同的父元素添加这个样式 */
  .content-container{
    display:flex;
    flex-wrap:wrap;
    gap:22px; /* 用gap代替figure的margin-right，间距更均匀 */
    align-items:flex-start; /* 让图片和文本顶部对齐，和你原来的vertical-align:top效果一致 */
  }
  
  /* 调整figure的margin，因为父容器用了gap */
  figure{
    margin:0;
    /* 删掉 margin-right:22px */
  }
  

• 针对性的移动端适配
  如果想在手机上让图片占满整个宽度，文本乖乖排在下面，可以加个媒体查询：

  @media (max-width:768px){
    figure{
      width:100%;
      margin-bottom:16px; /* 图片和文本之间加个间距，看着更舒服 */
    }
    figure img{
      width:100%;
      height:auto; /* 保持图片的宽高比例，不会变形 */
    }
    #text{
      width:100%;
    }
  }
  

简单说，绝对定位适合那种需要固定在某个角落的元素，比如悬浮按钮，但完全不适合这种需要跟着页面流布局的文本和图片组合。用正常文档流或者Flexbox，才能让元素在不同屏幕尺寸下自动调整位置，避免偏移重叠。

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