The images below illustrate what the actual problem is
So as you can see this is a puzzle, and is being created by javascript. Each row is created like this.
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>");
Even using float
style keeps this problem. Is there a way to lock a window not to be resized smaller than x
? Could you please point me in the right direction as in what im doing wrong, or not doing.
您是否尝试过为div添加固定宽度?
<div style='float:none;width:480px;'>
如果为div设置宽度(以px为单位),则调整大小将导致出现滚动条。
document.write("<div style='float:none;width:600px'>");
只需使用CSS将容器div的宽度设置为4张图片的宽度即可,即480px。
Try putting
white-space: nowrap;
on the style of the div. That should prevent its contents from wrapping. Instead you'll get a horizontal scrollbar.
还要考虑最小宽度http://www.w3schools.com/jsref/prop_style_minwidth.asp和CSS等效项。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.