Как получить CSS-макет, как на elkaniho.com/ - PullRequest
Новая
       21

Как получить CSS-макет, как на elkaniho.com/

1 голос
/ 06 апреля 2010

Этот веб-сайт http://www.elkaniho.com/ имеет CSS-макет, который, как я и хочу, вы видите, стеки divs накладываются друг на друга, не на точную сетку, а просто внизу и сбоку.

А когда вы изменяете размер браузера, все они прекрасно настраиваются?

Кто-нибудь знает, как я могу получить такой же макет, как на elkaniho.com или какой тип макета это называется?

Ответы [ 3 ]

2 голосов
/ 06 апреля 2010

Существует также аккуратный плагин jQuery под названием Masonry , который может работать с div-файлами различной ширины и складывать их максимально плотно. Зависит от вашего контента.

1 голос
/ 06 апреля 2010

Это всего лишь шесть столбцов макета. Легко сделать с 6 делами: 

<div id="container">
  <div class="column">one</div>
  ...
  <div class="column">six</div>
</div>

Как макет жидкости: 

#container { overflow: auto; }
div.column { width: 16%; float: left; }

Конечно, вы можете также установить ширину.

В каждом столбце есть несколько элементов div, которые выполняют то, что делают элементы div (и фактически любой элемент блока): они укладываются сверху вниз.

0 голосов
/ 06 апреля 2010

Эффект, о котором вы говорите, создан с использованием JavaScript. Если вы посмотрите на исходный код, вы найдете ссылку на файл javascript с именем funciones.js, который включает функции cajas и cajasInterior, которые отвечают за этот эффект. Также обратите внимание, что они используют jQuery.

Функции:

  1. Вычисляет максимальное количество столбцов на основе ширины тела, ширины поля и поля
  2. Устанавливает все div с классом box и boxInterior, чтобы иметь абсолютные позиции и устанавливать их ширину
  3. Пройдет через каждое поле и вычислит левую и верхнюю позиции.

Я бы связался с веб-мастером сайта и попросил разрешения использовать этот скрипт и изменить его в соответствии с вашими потребностями.

...