Question

文字越过图片，但是每次碰到那张图片我都需要换一行。 HTML和CSS如下。我可以只漂浮在图片上吗，或者我需要其他东西。调整大小后，文本也不能进入其段落的边框。

 img{
        position: absolute;
        right: 0;
        top: 0;
        align:right;

        margin-left: 125px;
        width: 100px;
        height: 100px;
        margin-left: 120px;


    }

    .participation{


        position: relative;
        height: 250px;
        width: 50%;
    }

    p{
        position: absolute;
    }

HTML

<body id="css-zen-garden">
<div class="page-wrapper">



    <div class="main supporting" id="zen-supporting" role="main">


        <div class="participation" id="zen-participation" role="article">
            <h3>Participation</h3>
            <p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
            <img src="zebra_shark1.jpg">

What paragraph should look like

Whole task

Answer 1

为此，您需要停止使用position: absolute。您可以使用float来实现所需的行为：

p {
   max-width: 500px; /*set width for demo purposes, so that you see the text wrapping*/
}
   
img {
 float: right
}

<p>
<img src="https://via.placeholder.com/150">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

Answer 2

这就是position: absolute应该做的。当您使用position: absolute时，就像您告诉浏览器：“忽略其他元素，最终位置将由这些坐标（通过left和top属性）给出。” < / p>

如果这不是您想要的（可能不是），请不要使用position: absolute，而请尝试position: relative或float: left。

对于您的问题，没有一个简单的答案，因为正在考虑根据您的需要构建代码：）

Answer 3

您不应将图像绝对定位，因为该元素是从上下文中获取的。这就是为什么您的文字与图片重叠的原因，因为它不知道图片在那里。

您可以尝试在图像上使用float:right。

如何停止文字在图片下方或上方

3 个答案: