Question

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

我能做些什么来解决这个问题吗？

#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; 
}

Answer 1

首先，请勿使用position: fixed;为您当前的情况定位图片。 position: fixed;用于在屏幕上保留固定元素，以便它永远不会移动。当您在较小的屏幕上查看图像时，文本必须移动到某处，因此它与固定的图像重叠。

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

也可以在图片上试用position: relative;。

Answer 2

position: fixed将图片放在文字上。如果要在周围显示文字，请将图像保持为内嵌。

Answer 3

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

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

3 个答案: