打开窗口大小的网页布局

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

还要考虑min-width http://www.w3schools.com/jsref/prop_style_minwidth.asp和CSS等效。