向左浮动后调整网页大小时的图像移位答案

【问题标题】：Image Shifting when Webpage is Resized after Floating Left向左浮动后调整网页大小时的图像移位
【发布时间】：2020-09-25 07:51:22
【问题描述】：

我不知道为什么在调整网页大小时我的图像会发生变化。没有绝对定位，图像只是向左浮动，父母只给它一些填充和边距。这是 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>

【问题讨论】：

你希望你的图片做什么？
图像从容器中出来，与文本不符。我希望它与文本和容器内部保持一致。
抱歉图片没有显示在代码sn-p中

标签： html css image resize

【解决方案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>

【讨论】：