如何使用语义和干净的HTML，CSS来制作不均匀的文本包装（不是正方形或圆形）？

Question

如何使用语义和干净的HTML，CSS进行文本包装？兼容所有浏览器。

如果没有其他解决方案，我正在考虑向<p>添加不同的类。

但每次客户端无法更改类时都会这样，这是一个缺点。

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;
}

但缺点是，与段落类解决方案一样，这是一个非常手动的修复。你可以看到它in action here。