CSS пузыриться при использовании JQuery Quicksand

Question

Я использую JQuery Quicksand создать нефильтруемый портфель статей:

http://davekiss.com/new/

Проблема заключается в том, когда фильтры в боковой панели пункте щелкают (видео, веб-сайты, графика движения), CSS удваивается в статьях, которые фильтруются и не располагаются должным образом, пока анимация не будет завершена. Плагин добавляет top: 60px; left: 416px; к первой статье в отфильтрованном наборе, проталкивая все.

Продолжайте нажимать website, чтобы увидеть эффект.

Я считаю, что это мешающий CSS, но я не уверен, как настроить его так, что он играет хорошо с плагином:

article.project-container { 
    float: left; 
    position: relative; 
    margin: 5px; 
    padding: 10px; 
    background: none repeat scroll 0 0 #FFFFFF; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); 
} 

Посетите http://razorjack.net/quicksand и нажмите на фильтры (все, приложения, утилиты), чтобы увидеть предполагаемый эффект.

Любая помощь была бы высоко оценена!

Answer 1

С официальной страницы GitHub ....

Quicksand использует позицию: абсолютная анимировать элементы. Это означает, что контейнер не может использовать абсолютное позиционирование, потому что он нарушает вычисления координат Quicksand. После того, как я попытался отключить позицию: абсолютный в вашем разделе. Thumbs, Quicksand начал работать безупречно. И поскольку ваш макет, похоже, не нуждается в таком размещении (регулярные поплавки будут выполнять эту работу), это исправит проблему.

Answer 2

переписать правила следующим образом:

article.project-container { 
    float: left; 
    position: relative; 
    top: 5px !important; 
    left: 5px !important; 
    margin: 5px !important; 
    padding: 10px; 
    background-color: #fff; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); 
} 

в !important декларации используются для переопределения правил плагина.

(background также переписан как указание сокращения для одного объекта избыточно).