响应式布局下图片文字环绕失效，求百分比宽度适配方案

我明白你的困扰——用固定像素宽度时文字环绕正常，但换成百分比就出问题，用vw又受整个页面宽度约束而不是父容器。咱们一步步来解决这个问题：

核心问题分析 #

你当前的图片用了float: right，但直接给图片设百分比宽度时，因为父容器的布局（比如Bootstrap的col）在不同屏幕尺寸下宽度变化，加上margin-left这类固定值，导致文字环绕的逻辑混乱。而vw单位是基于视口宽度，自然不会跟着父元素走。

解决方案1：结合CSS shape-outside 精准控制环绕效果 #

这个属性能让文字按照指定的形状（这里就是图片的外轮廓）来环绕，比单纯的float更可靠，尤其适合响应式场景。修改你的CSS：

.image-wrapper {
  float: right;
  margin-left: 25px;
  /* 让文字跟着图片的margin区域来环绕 */
  shape-outside: margin-box;
}

.image-wrapper img {
  /* 相对于父容器（image-wrapper）的宽度 */
  width: 100%;
  max-width: 500px; /* 限制最大宽度，避免大屏幕下图片过大 */
  height: auto; /* 保持图片比例 */
}

然后把HTML里图片的内联样式去掉，改成上面的CSS控制。这样图片宽度会跟着image-wrapper走，而shape-outside确保文字正确环绕，同时响应式也能正常工作。

解决方案2：用Bootstrap栅格配合响应式类 #

如果更依赖Bootstrap的布局体系，可以把图片和文字放在不同的栅格列中，小屏幕下自动堆叠：

<article class="row single-post no-gutters">
  <div class="col-md-8 order-md-1">
    <div class="single-post-content-wrapper" style="text-align-last:right; padding-top: 5px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra nisi sed nisi tempor, non suscipit libero dictum. Vivamus gravida cursus malesuada. Pellentesque mi nulla, pharetra ut quam sed, lobortis rhoncus lectus. Cras vel augue mi. Aliquam vulputate dictum ex, sollicitudin tincidunt purus venenatis sed. Donec bibendum ligula eu justo auctor, ac efficitur tortor sodales. Quisque sit amet facilisis neque, sit amet volutpat velit. Sed sagittis mattis enim, vel tincidunt dui gravida tincidunt. Donec imperdiet sem vitae sagittis lobortis. Pellentesque semper gravida massa. Suspendisse congue ac orci ut dapibus.
    </div>
  </div>
  <div class="col-md-4 order-md-2 mb-3 mb-md-0">
    <img src="https://via.placeholder.com/1000" class="img-fluid" style="margin-left: 25px;" />
  </div>
</article>

这里用order-md-*控制在中等屏幕以上图片在右侧，小屏幕下图片自动跑到文字下面，img-fluid确保图片自适应父容器宽度，完美解决响应式问题。

关于Plunker的使用小提示 #

你打开那个Plunker链接后，页面左侧是代码编辑区（分HTML、CSS、JS标签），右上角有个Run按钮，点击后右侧就会显示预览效果啦，修改代码后再点Run就能看到更新。

内容的提问来源于stack exchange，提问作者Torben Van Assche