CSS - 我的图像在较小的屏幕尺寸上与我的文本重叠

Posted 2023-03-05

【中文标题】CSS - 我的图像在较小的屏幕尺寸上与我的文本重叠

【英文标题】：CSS - My images are overlapping my text on a smaller screen size

【发布时间】：2013-04-07 23:54:22

【问题描述】：

在我的网站上，当屏幕尺寸较小时，图像会与我的主要内容文本重叠。在家里完全没问题，因为我的屏幕要大得多，但现在我在上大学，看起来很糟糕。

有什么办法可以解决这个问题吗？

#content   
    font-size:16px;
    margin: 0 auto;
    width: 955px; 

这是问题的图片： http://i776.photobucket.com/albums/yy41/tom14431996/problem-1_zpsa410ef94.png

如您所见，图像与文本重叠。

这是添加第一张图片的示例代码：

#imageholder1 
float: left;
left: 2%;
position: fixed;
top: 11%;
border: double;
border-color: #333;

这是我的文本代码：

#content 
    font-size:16px;
    margin: 0 auto;
    width: 955px; 

【问题讨论】：

你能创建一个小提琴吗？ jsfiddle.net

删除position: fixed;

2014 年版权？哎呀....

float 和 position 不要混用。

【参考方案1】：

首先，不要针对您当前的情况使用position: fixed; 定位您的图像。 position: fixed; 用于在屏幕上保持元素固定，使其永远不会移动。当您在较小的屏幕上查看图像时，文本必须移动到某个位置，因此它会与固定图像重叠。

尝试为您的文本的类/ID 设置一个宽度，例如50%，以便它适应您的屏幕宽度。如果我能看到更多的 html/css，我可以提供进一步的帮助。

也可以在您的图片上尝试position: relative;。

【参考方案2】：

position: fixed 将图像放在文本上。如果您想在图片周围显示文字，请保持图片内联。

【参考方案3】：

发生这种情况是因为您使用的是position: fixed; - 当您这样做时，该元素不会占用布局中的空间，而是位于静态定位的元素之上（默认设置）。您的 float: left; 在这里什么都不做，因为您不能有一个浮动且位置固定的元素。您可以通过使用边距和/或填充来解决此问题，以确保最小尺寸，以便固定元素始终位于边距/填充的顶部。或者您可以实际使用浮动，这将使内容围绕图像流动。

【讨论】：

所以我应该删除位置：固定；在所有图像上，然后使用边距/填充定位它们？

不，如果您使用边距/填充，它将在内容上，以说明图像的固定位置。但是使用 float 绝对是一个更好的解决方案。在这种情况下，您可能也希望使用边距，但出于不同的原因。