在段落中间浮动元素 | CSS-Tricks

假设您希望将图像（或任何其他元素）视觉上向左浮动到一段文本中。但就像……在段落的中间，而不是在顶部。这是可行的，但它肯定属于 CSS 技巧的范畴！

您可以做的一件事是将图像直接放在段落的中间

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing 
  <img src="tree.jpg" alt="An oak tree." />
  elit. Similique quibusdam aliquam provident suscipit 
  corporis minima? Voluptatem temporibus nulla
</p>

但这非常尴尬。请注意 alt 文本。我们不能在句子的中间使用随机的 alt 文本。从语义上讲，它很糟糕，并且对于使用辅助技术的使用者来说，它确实令人困惑。

所以我们必须做的就是将图像放在段落之前。

<img src="tree.jpg" alt="An oak tree." />

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing 
  elit. Similique quibusdam aliquam provident suscipit 
  corporis minima? Voluptatem temporibus nulla
</p>

但是当我们这样做时，我们并不完全是在将图像浮动到段落的中间。它就在顶部。没有 margin-top 或垂直平移或任何东西可以在这里拯救我们。margin 将只是扩展浮动区域的高度，而 translate 将会将图像推入文本中。

诀窍，至少我发现的一个诀窍，是利用 shape-outside 和 polygon() 来重新塑造围绕您想要放置位置的浮动区域。您可以跳过左上角部分。使用 Clippy 是开始使用多边形的一个好方法

但不要使用 Clippy 默认提供的 clip-path，而是将该值应用于 shape-outside。

如果您只是将一个框放置在该位置，这应该就足够了。但是，如果它实际上是一个图像或需要背景颜色，您可能也需要应用 clip-path，并可能将内容转换到位。这就是我通过一些调整最终得到的结果。

查看 CodePen 上的示例
段落中间的浮动剪裁。，作者为 Chris Coyier (@chriscoyier)
在 CodePen 上。

Glenn

# 2019年11月4日

您提出了一个我之前没有考虑到的重大可访问性问题——如何处理段落内的图像。如果只是为了展示，您可以不用 alt 标签或使用 aria-hidden，但我正在考虑 CMS 处理此问题的准备程度如何。客户很容易将图像放在任何地方并赋予其任何他们想要的 alt 文本。我正在努力思考一种处理方法……使用您的示例，我想您可以使用 JS 针对段落内的图像并应用 cut-in 类，或者可能创建几个这样的类以便您可以处理多个图像……或者在后端添加一个自定义字段，以便客户可以对图像的位置进行一些控制。这些方法都不算特别整洁，但为了语义和可访问性，应该解决这个问题。

Adrian Roselli

评论永久链接# 2019年11月6日

您已经指出了文案作者需要与周围内容一起设计 alt 属性中的文本的一个重要原因。这也是为什么只编写一次 alt 对于多次使用的图像不起作用的原因——想想 WordPress 媒体库。当然，这排除了使用 alt="" 的纯装饰性图像。

rosazotano

# 2019年11月5日

精彩的帖子！
祝贺！

Davor Suljic

# 2019年11月9日

Razvan Caliman 撰写了一篇很棒的文章——https://www.html5rocks.com/en/tutorials/shapes/getting-started/——关于 CSS 形状。他的简单解决方案是使用 shape-outside: content-box。

.cut-in {

  ...

  float: left;
  shape-outside: content-box;
  margin-top: var(--top); 
}

Chris

# 2019年11月9日

实现相同目标的另一种潜在更简单的方法是使用宽度为零、高度不为零的浮动元素，将其放在浮动图像之前以将其向下推。（对图像使用 clear: left 以将其向下调整。）

这是一个 <img> 位于 <p> 元素内部的示例

这是一个 <img> 位于 <picture> 元素内部的示例

此评论线程已关闭。如果您有重要信息需要共享，请联系我们。