Question

如何获得段落的一部分以包裹在该向日葵图片之类的图像上方？

如果我将图像设为相对并使用top，则图像仍将占据空间，并且文本不会在上方环绕。如果我保持位置不变并使用margin-top，那么它也不会自动换行。

此处示例：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

<p><img src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

当菠萝图像上方的前三个包裹在上面时，我如何向下移动菠萝图像？

float: right;
position: relative;
top: 60px;

不起作用，并且

float: right;
margin-top: 60px;

不起作用。

Answer 1

相对于W3Schools中的示例，只需将图像元素放在段落标记中最理想的位置即可。

请参见下面的代码示例及其获得的结果。您可能必须尝试使用img标签的位置来获得所需的确切结果，但这是一个起点。

img {
  float: right;
}

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. <img src="https://via.placeholder.com/150" />Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

Answer 2

如果您想要像第一张图片一样的效果，可以使用 clip-path css属性来达到目的。

您可以使用http://bennettfeely.com/clippy/。用于处理剪切路径的在线工具。

使用剪切路径，您可以创建自定义且非常视觉化的令人愉悦的布局，以将图像包装到段落中。

简·西蒙斯（Jen Simmons）在她的频道中以奇妙的方式对其进行了解释。

https://www.youtube.com/watch?v=pOB75oTNhw0

她所有的视频都是宝藏。

在浮动图片上方成为段落换行的一部分

2 个答案: