網頁布局因窗口大小調整而中斷

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等效項。