3

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

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

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

3 回答 3

2

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

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

试试position: relative;你的图片。

于 2013-04-15T18:45:45.883 回答
1

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

于 2013-04-15T18:42:13.763 回答
1

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

于 2013-04-15T18:43:54.833 回答