Разбивка макета веб-страницы при изменении размера окна

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

Также учитывайте минимальную ширину http://www.w3schools.com/jsref/prop_style_minwidth.asp и CSS-эквивалент.

Answer 3

Попробуйте поставить

white-space: nowrap;

на стиль div.Это должно предотвратить его содержимое от упаковки.Вместо этого вы получите горизонтальную полосу прокрутки.

Answer 4

Просто используйте css, чтобы установить ширину контейнера div, равную ширине 4 изображений, которая должна быть 480px.

Answer 5

Если вы укажете свой div шириной (в пикселях), изменение размера приведет к появлению полосы прокрутки.

document.write("<div style='float:none;width:600px'>");