网页布局调整破

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