Взгляните на поиск картинок у Google, Yandex и т. п. Потом поиграйте с шириной экрана. Видите как это? Вот я хочу вам показать, как это реализовывается.
Первый и самый простой способ.
Задаем блоку минимальную ширину и ширину в процентах.
.blocks{
float:left;
min-width:200px;
max-width:300px;
width:25%;
}
Как видите, пример не очень красив. Остается пустое пространство..
С использованием JavaScript.
Этот пример, продолжение предыдущего.
Техника:
Мы просто берем количество вмещающихся блоков в ширину. Другими словами, это количество колонок (n). Затем расчитываем каждому блоку процентную ширину (100/n).
Скрипт, считающий количество колонок:
cc=Math.floor(document.documentElement.offsetWidth/(230));
// максимальная ширина блока 230
document.getElementsByTagName('body')[0].className = 'columns' + cc;
// присваиваем нужный класс для body
И примерно такой CSS, задаст им нужную ширину:
.columns1 .block{width:100%} //одна колонка
.columns2 .block{width:50%} //две колонки
.columns3 .block{width:33%} //три колонки
…
Вот и все! ; ).
- Адаптивная таблица от Google
- Switchy McLayout: An Adaptive Layout Technique — техника описанная на alistapart
- Dynamic layouts with adaptive columns — еще один пример адаптивного сайта
- Пример сайта с динамическим лэйаутом и статья об этом
- Красивый сайт на флэш иллюстрирующий эту же идею
Спасибо за внимание!
Постовой: Желаете раскрутить свой сайт с нуля и бесплатно? Тогда обмен постовыми — это то, что вам нужно в качестве самого простого метода получения естественных ссылок для продвижения сайта..
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать