Передо мной стоит задача создать сайт вот с такой мазаичной резиновой версткой
http://www.dunhill.com/
Обратите внимание - как сайт ведет себя при масштабировании. Он так "ловко" меняет всю расстановку блоков, что они всегда подогнаны без пустых пятен, хотя все разного размера.
Теперь о там что я пробовал. Для начала подметил, что все блоки отличаются друг от друга в кратное число раз по площади, как листы бумаги а1, а2, .... и т.д. Соответственно создал несколько дивов и расставил их более менее хаотично, назначил им float: left, и начал масштабировать.
<style>
.a4 {
width: 297px;
height: 210px;
}
.a3 {
width: 297px;
height: 420px;
}
.a2 {
width: 594px;
height: 420px;
}
.a2plus {
width: 594px;
height: 630px;
}
div {
border: 1px solid gray;
DISPLAY: block;
background: #c99;
float: left;
padding: 0;
margin: 0;
}
</style>
<div class="a2plus"> </div>
<div class="a3"> </div>
<div class="a2"> </div>
<div class="a3"> </div>
<div class="a2"> </div>
<div class="a3"> </div>
<div class="a4"> </div>
<div class="a4"> </div>
<div class="a2"> </div>
<div class="a2"> </div>
<div class="a4"> </div>
<div class="a4"> </div>
<div class="a4"> </div>
Но ничего не вышло. Все раскладывается с кучей белых незаполненых пятен и сразу и при масштабировании браузера.
Попробывал придумать алгоритм расстановки при $(window).resize(...
Но сломал голову, как это сделать.
Прошу подсказать css или js или совместное решание.
В исходники js и css, прикрапленные к странице лазить уже пытался, но так и не нашел способа решения.
Зарание спасибо.