我遇到了与此类似的问题... CSS bubbling while using jQuery Quicksand .当我点击过滤器时,
top: 206
并在转换完成后滑回 0,它看起来很好。但是 float: left
,就像他们在另一个“冒泡”问题的附加链接中提到的那样。
这是我的 CSS。
ul.filter li {
float:left;
margin-right:20px;
margin-bottom: 20px;
list-style-type: none;
font-size: 17px;
}
ul.filterable-grid{ float: left; }
ul.filterable-grid li {
width:295px;
float: left;
margin-right:10px;
list-style-type: none;
text-transform: uppercase;
padding: 10px 10px 10px 10px;
border: 3px solid;
display: block;
}
这是我查看源代码时的标记。
<ul class="filterable-grid clearfix">
<li class="portfolio-item" data-id="id-2" data-type="filter-two ">
<a rel="prettyPhoto[gallery]" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg">
<img width="500" height="500" src="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg" class="attachment-portfolio wp-post-image" alt="1" />
</a>
<p><a href="http://localhost:8888/BVH/?portfolio=testing2">Testing2</a></p>
</li>
<li class="portfolio-item" data-id="id-3" data-type="filter-one ">
<a rel="prettyPhoto[gallery]" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg">
<img width="500" height="500" src="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg" class="attachment-portfolio wp-post-image" alt="1" />
</a>
<p><a href="http://localhost:8888/BVH/?portfolio=testing">Testing</a></p>
</li>
</ul>
最佳答案
查看给出的示例后 here ,我认为你可以去掉这一行:
ul.filterable-grid{ float: left; }
为您的 li
样式添加一个 height
和一个 overflow:hidden
属性
关于jQuery Quicksand 在转换过程中跳动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15552834/