0

これと同様の問題があります... jQuery Quicksand の使用中に CSS がバブリングします。フィルターを押すと、 <li> は絶対位置を取得しtop: 206、トランジションが完了すると 0 までスライドして戻ります。しかし、<li> は移動中にぎくしゃくしたり、びくびくしたりします。これはCSSの問題ですか？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>
4

1 に答える 1

0

hereの例を見た後、次の行を削除できると思います。

ul.filterable-grid{ float: left; }

スタイリングに aheightおよび aoverflow:hidden属性を追加しますli

于 2013-03-21T16:29:40.460 に答える