[英]Webpage layout breaking on window resize
下图说明了实际的问题是什么
如您所见,这是一个难题,由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
的窗口? 能否请您指出正确的方向,例如我做错了什么或没有做错。
您是否尝试过为div添加固定宽度?
<div style='float:none;width:480px;'>
如果为div设置宽度(以px为单位),则调整大小将导致出现滚动条。
document.write("<div style='float:none;width:600px'>");
只需使用CSS将容器div的宽度设置为4张图片的宽度即可,即480px。
试穿
white-space: nowrap;
在div风格上。 那应该防止其内容包装。 相反,您将获得一个水平滚动条。
还要考虑最小宽度http://www.w3schools.com/jsref/prop_style_minwidth.asp和CSS等效项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.