如何让文本环绕任意相对定位的图像？

要实现元素偏移后仍能让文本像Word那样多行环绕的效果，核心是用CSS的shape-outside属性自定义文本环绕区域，配合float即可解决问题，具体实现如下：

问题根源 #

你之前用position: relative偏移元素时，元素在文档流中的位置并未改变，float只会让文本环绕元素的原始文档流位置；而margin/padding只能扩大元素的占位空间，无法实现文本同时在元素两侧环绕的需求。

解决方案代码 #

CSS #

.mockImage {
  background-color: blue;
  position: relative;
  top: 5em;
  left: 10em;
  height: 120px;
  width: 60px;
  float: left;
  /* 定义文本需要避开的矩形区域，完全匹配元素偏移后的位置 */
  shape-outside: inset(5em calc(100% - 10em - 60px) calc(100% - 5em - 120px) 10em);
  /* 可选：设置文本与环绕区域的间距，类似内边距 */
  shape-margin: 0.5em;
}

HTML #

<div class="mockImage"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus faucibus lacus ac consequat. Aenean a neque ut lacus vulputate tempor id id erat. Praesent consequat nibh dolor, id mattis massa accumsan nec. Nam eu tristique eros. Quisque hendrerit suscipit mi. Sed viverra purus non sapien placerat varius. Praesent blandit condimentum dolor, quis finibus libero molestie eget. Quisque vulputate velit eu feugiat facilisis. Donec risus sapien, sollicitudin hendrerit urna id, mollis eleifend nibh. Phasellus dolor dui, semper quis tortor varius, posuere posuere velit. Cras auctor dui et magna fringilla, eu rhoncus tortor facilisis. Vestibulum leo sem, vulputate eget luctus eu, aliquet vel ipsum. Aliquam ac dui et justo cursus tincidunt. Etiam fringilla bibendum nibh, nec auctor ex pellentesque id. Nam commodo placerat lectus, sit amet condimentum ante pellentesque a. Etiam ac maximus libero, id faucibus purus. Praesent odio sapien, consequat in mi id, tincidunt aliquam augue. Duis id ligula sodales, ullamcorper enim a, ullamcorper nisl. Phasellus tempus ultrices lacus sit amet congue. Integer a rutrum lacus. Sed in accumsan quam. Proin mollis tortor vitae lacus gravida eleifend. Cras in risus ornare, finibus ante et, interdum diam. Fusce nec odio sodales dolor venenatis sagittis. Duis lacinia rhoncus eros, eu sodales magna pulvinar vitae. Curabitur cursus dui in sapien accumsan luctus. Aenean placerat nulla felis, a egestas odio pulvinar in. Duis lacinia turpis felis, eu pretium eros ullamcorper ac. Aliquam vitae sagittis neque, non posuere est. Phasellus varius, tortor at luctus imperdiet, dui risus rutrum risus, vitae pulvinar neque odio eget turpis. Fusce eget gravida elit. Suspendisse quis orci blandit, interdum nunc ut, pulvinar dui. Aenean commodo metus mi, vel tincidunt elit convallis vitae. Quisque et metus sollicitudin, euismod purus at, porta augue. Ut pretium sem ligula, sed fermentum nibh auctor ac. Sed eu leo eu quam pharetra aliquam id et ipsum. Aliquam scelerisque leo quis mauris aliquam, eu suscipit felis sollicitudin. Etiam laoreet velit tempor scelerisque mollis. Sed ultrices pharetra mauris, eu dictum erat fringilla nec. Ut lectus urna, imperdiet id posuere ac, consequat et nisi. Donec et egestas metus, vitae rhoncus augue. Pellentesque sed risus in mauris faucibus euismod ornare a arcu. Mauris eu finibus libero, sit amet volutpat massa. Fusce egestas, ipsum quis vulputate ullamcorper, diam ante fermentum ante, at lobortis urna lacus et leo. Ut eget molestie diam. Mauris cursus urna eget dapibus tempor. Proin orci nunc, imperdiet ut enim eu, viverra sodales mi. Proin sit amet lorem ultrices, facilisis erat sed, fermentum augue. Aenean ut arcu eget enim posuere efficitur non ut ex. Sed vel lorem eleifend, vulputate massa sed, efficitur diam. Sed pretium ultricies interdum. In auctor volutpat arcu eu porta. Proin odio lorem, scelerisque a erat a, facilisis ornare metus. Maecenas bibendum aliquam lectus, quis porttitor nisl maximus non. In eget orci suscipit, blandit odio eget, ultricies ligula. Donec eu lacinia magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam maximus tempus arcu, eget fermentum ligula vestibulum at. Mauris eu neque leo. Aliquam erat volutpat.

关键说明 #

• shape-outside: inset(...)：四个参数依次为上、右、下、左的缩进量，通过计算精准匹配元素偏移后的矩形区域，让文本绕开该区域排列。如果元素位置/大小动态变化，可通过JS实时计算并更新这个值。
• shape-margin：可选属性，用于设置文本与环绕区域的间距，提升排版美观度。
• 兼容性：现代主流浏览器（Chrome、Firefox、Safari、Edge）均原生支持shape-outside，无需额外库；若需兼容旧版IE，可考虑使用shape-outside-polyfill这类第三方工具。

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