段落不会环绕图像

Question

好吧，这似乎有问题……我尝试了很多东西，但我对此一窍不通，所以它可能太明显了，我只是想念它……

.container {
 width: 80%;
 margin: auto;
 overflow: hidden;
}

#about {
 min-height: 500px;
 color: white;
 padding: 40px 100px;
}

#about h1, p {
 float: left;
}

#about img {
 float: right;
}

<section id="about">
 <div class="container">
   <h1>About</h1>
   <p>Lorem ipsum dolor sit amet</p>
   <img src="https://picsum.photos/250/250">
 </div>
</section>

Answer 1

只有 inline 元素围绕 floated 元素流动，但是 h1 和 p 标签都是 block 元素。您可以将它们的显示都更改为 inline-block 但是更好的解决方案可能只是将 img 放在 p 标签内本身（因为默认情况下文本具有 inline 样式，并且会自然地围绕您的 floated 图像流动）。

.container {
 width: 80%;
 margin: auto;
}

#about {
 min-height: 500px;
 padding: 40px 100px;
}

#about img {
 float: right;
}

<section id="about">
 <div class="container">
   <h1>About</h1>
   <p><img src="https://picsum.photos/250/250">Lorem ipsum dolor sit amet</p>
 </div>
</section>

Answer 2

我遇到了同样的问题。我正在使用 Bootstrap 4 和本地 style.css 文件。尝试删除 float: left;对于“#about h1, p”选择器，看看它是否有效。我没有为 h1 和 p 元素设置 "display: inline-block;" 声明，它仍然有效。

这是我的代码：

.about p {
  font-size: 25px;
  min-width: 300px;
  text-align: justify;
  text-indent: 15px;
  font-weight: bold;
}
.me {
  height: 400px;
  margin: 0 30px 10px 0;
  box-shadow: 2px 5px 10px 0 hsla(240, 100%, 35%, 1);
}

<head>
  <!-- link to Bootstrap CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>
  <section class="container bg-primary text-white about" id="about">
        <img src="./images/me.JPG" alt="my picture" class="me rounded float-left"/>
        <h1 class="font-weight-bold display-4">About Me...</h1>
        <p>Hi there! My name is Mohsen, and I'm from Shiraz. I love to learn new things, and though I had just begun to learn about front-end web-development, I'm very
          passionate about it.</p>
      </section>
    </body>

段落不会环绕图像

Paragraph wont wrap around an image

css

image

word-wrap

paragraph