javascript - 清除 mixitup 过滤器使用的 div

Question

我已经使用 mixitup js 来过滤插件类型，其中每个 div 都包装在一列中。

要点是我不能使用 clear: both; CSS 属性。 我已经通过使用

在其他网站上解决了这个问题

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

但在 mixitup 中，由于过滤器的原因，我无法定位第 n 个元素，如果我点击自由选项卡，我定位的第 n 个元素将被其他 div 替换。

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

由于 contact form 7 的文本很长，分为 2 行，所以 div 的高度比其他的高。我想将第 4 个元素定位为 min-width: 992px; 并清除该 div。

HTML 结构是:

<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>

mixitup 的 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 的高度，使其始终 float 在浏览器的左侧？

Answer 1

有很多方法可以解决这个问题。但是，我会选择基于 CSS 的方法

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

更新:

如果您可以使用 flex，那么这将解决问题。它应该适用于所有屏幕。但是，您可以将其添加到 min-width: 992px 媒体查询中。决定权在你。

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