html - float 重叠文本重叠图像

Question

在图片上，当屏幕宽度小于 1400 像素左右时，您可以看到我的文字与图像重叠的问题。

这是我的 HTML。

<article>
<img src="images/welkomartikel2.jpg" />
</article>
<aside>
<h2>Welkom</h2>
<p>The Text that overlaps</p>
</aside>

这是 CSS:

article {
    float: left;
    width: 50%;
    margin: 0 auto;
    height: auto;
    padding: 4%;}

aside {
    float: right;
    margin: 0 auto;
    width: 35%;
    height: auto;
    padding: 3%;}

Overlaping text on my picture

Answer 1

您将两个元素彼此相邻 float ，这样它们就永远不会重叠，但问题是您没有代码来控制图像自身 的行为方式。您需要做的是确保图像永远不会超出其父级的范围:

article img {
  max-width: 100%;
  max-height: 100%;
}

希望对您有所帮助! :)