Question

好吧，这似乎有问题。我尝试了很多事情，但是我对此很不满意，所以可能很明显，我只是想念它...

AUTH_USER_MODEL

.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;
}

Answer 1

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

.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”选择器，并查看其是否有效。我没有设置“ display：inline-block;”声明h1和p元素，它仍然有效。

这是我的代码：

.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>

段落不会环绕图像

2 个答案: