跳转到主内容
趣航编程网 - 趣学编程，启航技术之路！
📁 网站地图

如何使用css grid实现文字环绕图片效果_利用网格区域划分排版空间

顺亿
顺亿
• 👁 0人浏览过
Grid本身不支持文本环绕图片，shape-outside仅对浮动元素生效；必须将图文共置一个普通块级容器内并用float实现环绕，再将该容器作为Grid的一个单元格。 Grid 本身无法实现文字环绕图片，
shape-outside
在 Grid 子项上完全无效——这不是写法问题，而是规范层面的限制。 为什么
grid-area
里加
shape-outside
没反应 浏览器明确忽略 Grid 容器中子元素的
float
和
shape-outside
。原因很直接：Grid 子项由
grid-column
/
grid-row
控制位置，已脱离文本流；而
shape-outside
只作用于参与行内流式布局的浮动元素（
float: left
或
float: right
），两者底层机制冲突。 即使给
.image
加了
float: left
和
shape-outside: circle(50%)
，只要它是
display: grid
容器的直系子项，就必然失效
overflow: hidden
、
display: block
、
margin: auto
这类常见样式会进一步破坏环绕所需的流式上下文 用
::before
伪元素插入图片或通过
content: url()
生成，同样不参与外部段落的文字流计算 真正能跑通的结构：Grid 控制区块，float 控制内部图文 必须把「图文共处一个流式容器」这个前提重建起来。做法是：让 Grid 只负责划分大区域（比如主内容区、侧边栏），而把需要环绕的图片和文字一起塞进某个 Grid 单元格内部的普通
或

里。 HTML 中图片标签必须出现在文字内容之前，否则环绕从段落开头就开始，视觉错位 该内部容器（即 Grid 子项）不能设
overflow: hidden
，否则会裁掉文字绕到图片下方的部分 图片需设
float: left
、
width
和
height
（固定值或等比缩放）、
margin-right: 12px
，禁用
display: block
如果 Grid 列宽是
200px
，但图片宽
180px
+ 文字最小宽度
200px
，那文字根本没空间绕，只能换行到底部——列轨道得留足余量
shape-outside: url()
在 Safari 里挂了怎么办 Safari 至今不支持
shape-outside: url(#svg-path)
或
shape-outside: url(image.svg)
，哪怕 SVG 路径闭合、背景透明、尺寸明确。这是硬性兼容缺口，不是配置问题。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 立即学习 “ 前端免费学习笔记（深入） ”； 想跨浏览器稳定生效，优先用
shape-outside: circle(50%)
或
polygon()
这类 CSS 内置函数 若必须用 SVG 路径，Chrome/Firefox 可行，但得确保
内只含单个
，无
、
或多余属性 别依赖
wrap-flow
或
wrap-through
——Exclusions 草案仍无任何浏览器实现，caniuse 标为 “No support” 最易被忽略的一点：Grid 和 float 是两层职责。Grid 管“哪块内容放哪”，float 管“这块里图和字怎么缠”。混在一起调，99% 的失败都卡在这儿。

相关文章