为什么我的 html 中的 div 中的文本没有环绕我的图片？答案

【问题标题】：Why is the text in my div in html not wrapping around my pictures?为什么我的 html 中的 div 中的文本没有环绕我的图片？
【发布时间】：2021-02-20 11:33:28
【问题描述】：

由于某种原因，我的 div#wrapper 中的文本没有环绕图像，而是在图片上方的行结束并在其下方恢复。我为图片创建了类并将它们编码为向左或向右浮动。这是我正在谈论的图片。 page screenshot

这里是代码。

 <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Planet Namek</title>
      <link href="css/styles.css" type="text/css"
        rel="stylesheet">     
        </head> 
        <body>
    <div id = wrapper>
    <h1>Welcome to Planet Namek</h1>          
        <h2>headline 2</h2>         
        <p align=left>Contrary to popular belief, Lorem Ipsum is not simply Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis at consectetur lorem donec massa sapien faucibus et molestie. Laoreet non curabitur gravida arcu ac tortor dignissim convallis. Elementum sagittis vitae et leo duis. Volutpat sed cras ornare arcu. Lacus vel facilisis volutpat est. Enim sed faucibus turpis in eu mi bibendum. Pellentesque adipiscing commodo elit at imperdiet. Mi ipsum faucibus vitae aliquet nec. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Aliquam purus sit amet luctus venenatis. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor.</p><img class ="right" src="Images/planetnamek.jpg" alt="planet namek">      
        <p align=left>Risus sed vulputate odio ut enim blandit volutpat maecenas. Amet nisl purus in mollis nunc sed id semper risus. Ornare lectus sit amet est placerat in egestas erat imperdiet. Nec feugiat in fermentum posuere urna. Risus nec feugiat in fermentum posuere urna. Fames ac turpis egestas integer eget. Viverra suspendisse potenti nullam ac tortor vitae. Scelerisque eu ultrices vitae auctor. Ultricies tristique nulla aliquet enim. Sed adipiscing diam donec adipiscing. Urna cursus eget nunc scelerisque viverra mauris. Adipiscing bibendum est ultricies integer quis auctor. Malesuada fames ac turpis egestas sed tempus urna. Ligula ullamcorper malesuada proin libero. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Sit amet nisl suscipit adipiscing bibendum est ultricies. Semper risus in hendrerit gravida. Aliquet enim tortor at auctor. Dolor sed viverra ipsum nunc. Accumsan lacus vel facilisis volutpat est velit. <img class ="left" src="Images/namekian.png" alt="namekian"></p>  
    Nisl nisi scelerisque eu ultrices vitae auctor. Eleifend quam adipiscing vitae proin. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum consequat. Elementum nibh tellus molestie nunc non blandit massa enim nec. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Consectetur lorem donec massa sapien faucibus. In ante metus dictum at tempor commodo ullamcorper. Blandit cursus risus at ultrices. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Sed arcu non odio euismod lacinia at. Mattis pellentesque id nibh tortor id aliquet lectus. Nunc eget lorem dolor sed. Id diam maecenas ultricies mi eget mauris pharetra et. Varius sit amet mattis vulputate enim nulla aliquet.             
        </div>
        </body>
        </html>

这里的css：

 <style>
* {
padding:0;
margin:0;
        }      
header{       
}   
body{
    background-image:url("images/namekbackground.jpg");   
    font-family:Verdana, Helvetica, Sans-seri;
    }            
div#wrapper{
        width:940px;
        margin:30px auto;
        border:1px solid #000;
        word-wrap:break-word;
        overflow: hidden;
        padding:20px;
        color:darkred;            
        background: rgba(10,50,300,.75);     
    }    
img-left{
    float:left;
        margin:0 100px 10px 0;        
        }             
img-right{
    float:right;
    margin: 0 0 10px 100px;
        }               
        p{
            word-wrap:break-word;
            line-height:1.4;
        }                       
</style>

【问题讨论】：

标签： html css image

【解决方案1】：

在您的 HTML 中，您的图像类为“右”和“左”

<img class ="right" src="Images/planetnamek.jpg" alt="planet namek">

但是，在您的 CSS 中，您将该类称为“img-right”和“img-left”。将您的 CSS 更改为 .left 和 .right。

.left{
float:left;
    margin:0 100px 10px 0;

    } 
    


.right{
    float:right;
    margin: 0 0 10px 100px;
        }

【讨论】：

【解决方案2】：

在p标签中使用position:absolute

在绝对位置中，元素相对于它的第一个祖先元素（包装类）定位

以下是证明相同的代码

.wrapper {
  font-size: 20px;
  font-family: 'arial';
  text-align: center;
}

p{
position:absolute;
}

.shape {
  
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background-color: #58ACFA;
  margin-left: 300px;
}

<div class="wrapper">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="shape"></div>
  </p>
</div>

【讨论】：