如何爲各種背景圖像的佈局正確地構建HTML，並在其上放置內容？

我正在建立一個網站，裏面放着各種背景圖片。我現在擁有它的方式不起作用，因爲當我在移動瀏覽器上查看網站時，某些元素被推到左側，在右側留下了一個醜陋的空白區域。如何爲各種背景圖像的佈局正確地構建HTML，並在其上放置內容？

這是因爲被推送的元素不包含在包裝中。但是，我不確定如何佈置所有元素，尤其是需要放置各種背景圖像的元素。

我已經創建了div如何佈局的簡單圖像。

注意：所有文字100% width, etc指的是紅色透明框（內容）下的div。實際網站可以查看here。

enter image description here

有人可以幫我找出我應該如何正確地構建HTML本網站的佈局？例如，我應該將上半部分還是下半部分分爲#top和#bottom以及每個內部的包裝？我堅持我應該如何解決這個問題。

2013-05-31 J82

-1

看來，所有的寬度都是基於像素（對於響應結果）應該是百分比。

什麼是破壞你的iPhone佈局似乎是在1122px與47px的邊緣的插板ID。這比上面和下面的其他div更廣泛。

2013-05-31 01:56:51 BenRacicot

令我困惑的是，'＃slide'（在＃slide-bg內）比＃pinboard寬1174px。這是否意味着我應該將所有元素包裝在1174px寬的包裝中？ – J82

似乎您的網站正在進行工作。通常你的「content」div居中，具有margin 0自動，由像素（即960px）和100％寬度設置的最大寬度。每個div裏面都會得到每個屏幕尺寸重新調整的百分比寬度。您的網站似乎不是以這種方式構建的。 – BenRacicot

如果我在所有@Desi幫助過，請將其作爲答案。有人投我的意圖試圖幫助... – BenRacicot

回答