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

如何使用语义和干净的HTML，CSS来制作这样的文本包装？ 兼容所有浏览器。

如果没有其他解决方案，我正在考虑向

添加不同的类。

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

Answer 1

您可以将图像设置为

上的背景，然后将透明容器浮动在背景图像的上方，使您不希望文本重叠。

 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...  

使用以下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; } 

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