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

由于联系表7的长文本有2行，div的高度比其他高。我想将min-width: 992px;的第4个元素作为目标并清除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的高度，以便它总是漂浮在浏览器左侧？

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

清除mixitup过滤器使用的div

1 个答案: