由于某种原因，我的div#包装器中的文本没有环绕图像，而是以图片上方的行结束，然后在图片下方继续。我为图片创建了类，并将它们编码为向左或向右浮动。这是我所说内容的图片。页面截图
这是代码。
<!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中，您的图像类为"右和"；"左"；
<img class ="right" src="Images/planetnamek.jpg" alt="planet namek">
然而，在您的CSS中，您将该类设置为"；img右"以及"；img left"；。将CSS更改为左和右.
.left{
float:left;
margin:0 100px 10px 0;
}
.right{
float:right;
margin: 0 0 10px 100px;
}
在p标签中使用position:absolute
在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>