如何使用语义化和干净的HTML、CSS实现不规则文本环绕（不是正方形或圆形）？

Question

如何使用语义化和干净的HTML、CSS实现像这样的文本环绕？并且在所有浏览器上都兼容。

只有将不同的类添加到

是我所能想到的唯一解决方案，如果没有其他解决方案的话。但这种方法的缺点是每次客户端无法更改类。

- Jitendra Vyas

---

你可能会喜欢看到这个小巧的工具：http://www.csstextwrap.com/ - Russell Dias

可以做到，但不会很干净也不太语义化。 - Matti Virkkunen

@Matti Virkkunen - 我同意你的看法。 - Jitendra Vyas

@Russell Dias- 我知道这个。如果没有其他语义方式，那么我会把它作为最后的手段使用。 - Jitendra Vyas

Answer 1

您可以将图像设置为<p>的背景，然后在不希望文字重叠的区域上方浮动透明容器。

<p>
    <span id="block1"></span>  
    <span id="block2"></span>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</p>

使用以下CSS：

p {
   background: url(your-image.png) no-repeat 100% 0;
}

#block1 {
   float: right;
   width: 100px;
   height: 100px;
}

#block2 {
   clear: both;
   float: right;
   width: 200px;
   height: 50px;
}

然而，缺点是与您的段落类解决方案一样，这是一个非常手动的修复方法。您可以在此处看到它的实际效果。

- Pat

---

+1 你的解决方案不错，但是在代码中保留空白的 <span> 不符合语义要求。 - Jitendra Vyas

问题在于，HTML或CSS无法表达不规则图像的“语义”。 图像的形状意味着什么？ 可能有很多事情，但在实际页面编码中，它只是一个形状。正如您所知，HTML不是页面描述语言 - 它旨在传达内容的含义。没有描述单个复杂形状的规定。 - Pointy