Question

在我的html内容中，我想在某个容器的右下角放置一个图像。虽然图像像所有图像一样是方形的，因为它具有高度和宽度，但眼睛看到的实际视觉图像不是方形的。它可以是例如球或三角形。我也想要这个容器中的文本，但是当文本很多时，我希望它围绕可视图像的边缘而不是沿着实际的矩形边缘流动。这可能吗？ html或css是否有一些构造，您可以在其中设置文本应远离的边框（或边）？

Answer 1

如果你只想用css和html解决问题，你需要用不同尺寸的多段（<p>标签）编写页面，并将图像设置为div包装的背景图像。

#wrapper {
width:500px;
height:500px;
background-color: #fff; /*Default bg, similar to the background's base color*/
background-image: url("image.png");
background-position: right bottom; /*Positioning*/
background-repeat: no-repeat; /*Prevent showing multiple background images*/
}

之后设置任何具有自定义宽度的段落来设置图像周围的文本。不幸的是，我不知道任何其他“自动”解决方案。

也许，你可以在这里找到一个有效的插件：

check this another stackoverflow question

文本在html中围绕多边形边缘流动

1 个答案: