向左浮动后调整网页大小时图像移动

Question

我不知道为什么在调整网页大小时我的图像会发生变化。没有绝对定位，图像只是向左浮动，parents 只给它一些填充和边距。这是 HTML:

.section-title {
  color: black;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

.section-title-info {
  margin-bottom: 1.5em;
  margin-top: 0;
}

.section-words-info {
  font-size: 20px;
  color: black;
  font-weight: 550;
  line-height: 30px;
}

.section-info {
  background-color: #706D9F;
  padding: 2em 1em;
}

.container {
  margin: 0 auto;
}

.img-main {
  float: left;
  height: 12em;
  border-radius: 50%;
}

<section class="section-info container">
  <h2 class="section-title section-title-info">Information</h2>
  <img class="img-main" src="https://ibb.co/g7LnzSc">
  <span class="section-words-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</section>

Answer 1

您需要将 overflow: auto; 添加到您的 .section-info 通过使用 float 它会将该元素从文档流中移除，因此您需要通过使用溢出自动。看这里：

.section-title {
  color: black;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

.section-title-info {
  margin-bottom: 1.5em;
  margin-top: 0;
}

.section-words-info {
  font-size: 20px;
  color: black;
  font-weight: 550;
  line-height: 30px;
}

.section-info {
  background-color: #706D9F;
  padding: 2em 1em;
  overflow: auto;
}

.container {
  margin: 0 auto;
}

.img-main {
  float: left;
  height: 12em;
  border-radius: 50%;
}

<section class="section-info container">
  <h2 class="section-title section-title-info">Information</h2>
  <img class="img-main" src="https://w3schools.com/html/img_girl.jpg" />
  <span class="section-words-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</section>

向左浮动后调整网页大小时图像移动

Image Shifting when Webpage is Resized after Floating Left

html

css

resize

image