mixitupフィルタで使用されるdivの消去

Question

mixuitup jsを使用して、各divが1つの列に折り返すプラグインタイプをフィルタリングしました。

重要な点は、clear: both; CSSプロパティを使用できないことです。 私は

.parent-class .column-class:nth-of-type(3n+1){ 
    clear:both; 
} 

を使用することにより、他のサイトでこの問題を達成している。しかし、私がターゲットにされたn番目の項目が置き換えられますよりも、私は自由なタブをクリックするとmixitupで、私は、あるため、フィルタのn番目の項目を対象とすることはできません他の部門。ためのdivの高さが他よりもある2行に来るコンタクトフォーム7の長いテキストに

you can view the issue in this link but make sure your browser width is less than 1100px and more than 992px

。 min-width: 992px;の4番目の要素をターゲットにして、そのdivをクリアします。

HTML構造は次のとおりです。mixitupため

<section class="plugin-listing-page"> 
<div class="col-sm-12 no-padding"> 
    <div class="wrap"> 
     <div class="plugin-type"> 
      <ul id="filters" class="clearfix post-filter-controls"> 
       <li><span class="filter active-onload theme-demo btn-default" data-filter=".all">All</span></li> 

       <li><span class="filter theme-demo btn-default" data-filter=".free">Free</span></li> 
       <li><span class="filter theme-demo btn-default" data-filter=".premium">Premium</span></li> 

      </ul> 
     </div> 
     <div class="filtr-container" id="pluginlist"> 
      <div class="col-md-4 col-sm-6 all listplugin free" data-bound=""> 
       <div class="single-plugin-list"> 
        <div class="single-plugin-list-image"> 
         <a href=""> 
          <img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" > 
         </a> 
        </div> 
        <div class="single-plugin-list-content"> 
         <h4 class="text-title"><a href="#">Test</a></h4> 
         <a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a> 
         <span class="theme-green pull-right">Free</span> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 all listplugin premium" data-bound=""> 
       <div class="single-plugin-list"> 
        <div class="single-plugin-list-image"> 
         <a href=""> 
          <img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" > 
         </a> 
        </div> 
        <div class="single-plugin-list-content"> 
         <h4 class="text-title"><a href="#">Test</a></h4> 
         <a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a> 
         <span class="theme-green pull-right">Free</span> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

JSは次のとおりです。

jQuery(document).ready(function ($) { 
jQuery.noConflict(); 
(function ($) { 
    $(function() { 
     var filterList = { 
      init: function() { 
       $('#pluginlist').mixItUp({ 
        selectors: { 
         target: '.listplugin', 
         filter: '.filter' 
        }, 
        load: { 
         filter: '.tables' // show app tab on first load 
        },callbacks: { 
        onMixEnd: function(state) { 
         if(state.activeFilter == '.listplugin') 
          $('.wil').addClass('active') 
        } 
       } 
       }); 
      } 
     }; 
     filterList.init(); 
    }); 
    setTimeout(function(){ 
     $('#filters li .active-onload').click(); 
    },100); 
    })(jQuery);  
}); 

は、それが常に左浮くようにdiv要素の高さをクリアするための任意の解決策はありますブラウザの？

Answer 1

この問題を解決する方法はたくさんあります。しかし、私はを更新したCSSベースのアプローチ

@media (min-width: 992px) and (max-width: 1100px){  
    .single-plugin-list-content h4 a{ 
    font-size: 90%; // or smaller 
    } 
} 

のために行くだろう：あなたはフレックス使用できる場合

、これは問題を解決します。すべての画面で動作するはずです。ただし、これはmin-width: 992pxメディアクエリに追加できます。決めるのはあなたです。

#pluginlist{ 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
}