浮动重叠文本重叠图像
Floats overlaping text overlaps image
在图片上,当屏幕宽度小于 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
您将两个元素彼此相邻浮动,这样它们就永远不会重叠,但问题是您没有代码来控制图像本身 的行为方式。您需要做的是确保图像永远不会超出其父级的范围:
article img {
max-width: 100%;
max-height: 100%;
}
希望对您有所帮助! :)
在图片上,当屏幕宽度小于 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
您将两个元素彼此相邻浮动,这样它们就永远不会重叠,但问题是您没有代码来控制图像本身 的行为方式。您需要做的是确保图像永远不会超出其父级的范围:
article img {
max-width: 100%;
max-height: 100%;
}
希望对您有所帮助! :)