當瀏覽器大小小於webPage大小時，如何停止向左移動的子div？

Question

我有這樣的HTML代碼：

<div id="maincontent"> 

     <div id="mainbackground"><img src="images/mainbackground.png" border="0" alt=""></div> 
     <div id="illustration"><img src="images/illustration.png" border="0" alt=""> 

      <div id="text1" class="sloganfont">Mahmood</div> 

     </div> 

    </div> 

CSS的這些div是：

#maincontent 
{ 
background:#CFCFCF; 
width:100%; 
height:1200px; 
position:relative; 
text-align:center; 
margin:0 auto; 
} 
#mainbackground{ 
position:relative; 
top:-10px; 
} 
#illustration 
{ 
position:relative; 
top:-768px; 
text-align:center; 
margin:0 auto; 
} 
#text1{ 
height: 25px; 
width:300px; 
background:none; 
position:relative; 
top:-503px; 
left:-268px; 
text-align:left; 
margin:0 auto; 
} 

當我提高我的瀏覽器的大小。然後插圖div和text1 div保持在中心，並正常工作。但是當我減少我的瀏覽器，然後原來的頁面寬度後，插圖div停止移動到左側，但text1 div不斷移動到左側。我希望text1 div停止時，資源管理器的寬度變得小於像插圖div的webPage寬度。我怎樣才能做到這一點？提前致謝。

Answer 1

您需要在適當的位置指定寬度，所有元素都以類似的方式作出響應，但由於您的位置相對定位＃text1爲負值，因此當屏幕尺寸小於該數量時它會熄滅。

這裏是它的工作的例子：http://jsfiddle.net/davetayls/GgzUR/

移動滑塊來做出正確的區域更廣泛和更小的

Answer 2

我會認爲它是因爲text1有一個指定的寬度，請嘗試在其他元素上設置寬度。