CSS - 我的圖片在較小的屏幕尺寸上重疊我的文字

在我的網站上，圖片與較小屏幕尺寸的主要內容文字重疊。在家裏，這很好，因爲我的屏幕更大，但現在我在大學裏，看起來很可怕。CSS - 我的圖片在較小的屏幕尺寸上重疊我的文字

有什麼我可以做的，以解決這個問題？

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

來源

2013-04-15 Tom Bailey

你可以創建一個小提琴嗎？ http://jsfiddle.net/ –

只需刪除'position：fixed;' –

position: fixed是把文字上的圖像。如果你想要文字來顯示他們周圍的圖像，保持圖像內聯。

來源

2013-04-15 18:42:13 Mooseman

發生這種情況是因爲您使用的是position: fixed; - 當您這樣做時，元素在佈局中不佔用空間，並且位於靜態定位元素的頂部（默認值）。你的float: left;在這裏什麼都不做，因爲你不能有一個浮動的元素，並且是固定的位置。您可以通過使用邊距和/或填充來確定最小尺寸，以便固定元素始終位於邊距/填充的頂部。或者你可以實際使用浮動，這將使內容在圖像周圍流動。

來源

2013-04-15 18:43:54

所以我應該刪除位置：固定;在所有的圖像上，然後使用邊距/填充來定位它們？ –

不，如果您使用邊距/填充，它會在內容上考慮圖像的固定位置。但使用float代替肯定是一個更好的解決方案。在這種情況下，您可能也想使用保證金，但出於不同的原因。 –

首先，請不要將您的圖片放在position: fixed;的當前位置。 position: fixed;是爲了保持屏幕上的元素固定，以便它永遠不會移動。當您在較小的屏幕上查看圖像時，文本必須移動到某個位置，以便與固定圖像重疊。

嘗試設置一個寬度到你的文本的類/ ID像50%，所以它適應你的屏幕寬度。如果我能看到更多的html/css，我可以進一步提供幫助。

嘗試position: relative;以及您的圖像。

來源

2013-04-15 18:45:45

CSS - 我的圖片在較小的屏幕尺寸上重疊我的文字

回答

相關問題