網頁佈局調整破

Question

下面的圖片說明實際的問題是什麼

因此，大家可以看到這是一個謎，並正在由JavaScript創建。每行都是這樣創建的。

document.write("<div style='float:none'>"); 
for(i=0; i < 4 ; i++) { 
     for(j=0; j < 4 ; j++) { 
     imgArray[i] = "Images/" + x + ".jpg"; 
     document.write("<img id= " + x + " src='Images/" + x + ".jpg' width='120' height='120' style='position:relative;top:50px;left:50px' onclick='checkMove(parseInt(id))'/>"); 
     x = x + 1; 
     } 
     document.write("<br>"); 
} 
document.write("</div>"); 

即使使用float風格保持了這個問題。有沒有辦法來鎖一個窗口不能調整大小小於x？你能否指出我的方向是正確的，比如我做錯了什麼，不做什麼。

Answer 1

您是否試圖將固定寬度添加到您的div？

<div style='float:none;width:480px;'> 

Answer 2

如果你給你div的寬度（以px爲單位），調整大小會導致滾動條出現。

document.write("<div style='float:none;width:600px'>"); 

Answer 3

只需使用css將容器div的寬度設置爲4個圖像的寬度，應爲480px。

Answer 4

嘗試把

white-space: nowrap; 

的div的風格。這應該防止其內容被打包。相反，你會得到一個水平滾動條。

Answer 5

還考慮最小寬度http://www.w3schools.com/jsref/prop_style_minwidth.asp和CSS等效。