CSS bubbling while using jQuery Quicksand

问题:

I'm using jQuery Quicksand to create a filterable portfolio of articles:

http://davekiss.com/new/

The problem is, when the filters in the sidebar paragraph are clicked (video, websites, motion graphics), the CSS is doubled on the articles that are being filtered and aren't properly positioned until the animation is complete. The plugin is adding top: 60px; left: 416px; to the first article in the filtered set, pushing everything over.

Keep clicking website to see the effect.

I believe this is the offending CSS, but I'm not sure how to adjust it so that it plays nice with the plugin:

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);
}

Visit http://razorjack.net/quicksand and click the filters (everything, applications, utilities) to see the intended effect.

Any help would be much appreciated!

回答1:

rewrite your rule as follows:

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);
}

the !important declarations are used to override the plugin's rules.

(background is also re-written as specifying a shorthand for a single property is redundant).

回答2:

From the official github page....

Quicksand uses position: absolute to animate the elements. This means that the container can't use absolute positioning because it breaks Quicksand's calculation of coordinates. After I tried to disable position: absolute in your section.thumbs, Quicksand started to work flawlessly. And since your layout doesn't seem to need this kind of positioning (regular floats will do the job), this will fix the issue.