小编jus*_*tme的帖子

大家好,我希望你做得很好.我正在使用Isotope,下面你可以看到我写的JavaScript.li如果它们是Isotope元素,我发现不可能将元素集中在一起.要通过居中查看我的意思,请参阅下面的图片.我已经设法将整个同位素集中到屏幕上,但我需要将元素集中在一起,而不是只浮动到左侧.

让我们从我的脚本代码开始:

<script>
 $(document).ready(function(e) {
    $(".ullist li").addClass('element-item');
});

</script> 
<script>
$(document).ready(function(e) {
// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  //layoutMode: 'fitRows',
});
//$('.grid').isotope({ layoutMode : 'fitRows' });
// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return …

我现在正在努力这么多个小时,但我仍然无法找到解决方案.我做了这个漂亮的网格,可以调整文本长度和浏览器调整.现在的问题是我无法将文本放在框中间.

我已经尝试了一切..我使用了几个属性来实现这一点,但没有任何效果.

text-align: center;
vertical-align: middle;
line-height: "same as div";

css代码:

.parent {
  text-align:center;
  margin:0px;
  width:100%;
  padding:0px;
  font-size:18px;
  color:#000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.child {
  padding:18px 25px;
  background: rgba(0, 0, 0, .5);
  list-style-type:none;
  width:inherit;
  margin:5px;

}

我在这里处理一个奇怪的问题..当我使用@ font-face时,似乎Microsoft Edge浏览器不加载字体.我检查了所有运行Windows 10和Microsoft Edge的计算机.

我检查了http://caniuse.com/#search=font%20face

它说font-face与Edge兼容,所以我不知道发生了什么.在我的例子中,我只有一个div及其字体参数.

CSS

@font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
@font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}

HTML

div {
  font-family:'Dosis';
}

实时版

http://codepen.io/mariomez/pen/YwGGWy

要了解我的代码,请访问此页面:

请先点击包装过滤器

http://codepen.io/mariomez/pen/qNrzAr?editors=0010

这是一种简化的动画过滤方法.

每个红色框可能有多个类作为过滤器的标识符.我对这段代码的目标是为淡入和淡出实现一个很好的动画方式.现在我设法做到这一点只是为了淡入.

即使我为淡出编写动画,我也无法在JS代码中正确使用它.

1过滤器的示例:我希望除"打包"之外的所有类都能很好地淡出并使包装类淡入淡出.

jQuery代码

    $(document).ready(function(){
    $(".filter-logo").click(function(){
        $(".all").fadeOut(normal,addClass('animated fadeOutEffect'));
        $(".logo").fadeIn(normal,addClass('animated fadeInEffect'));
    });
    $(".filter-website").click(function(){
        $(".all").fadeOut();
        $(".website").fadeIn().addClass('animated fadeInEffect');
    });

    $(".filter-packaging").click(function(){
        $(".all").fadeOut();
        $(".packaging").fadeIn().addClass('animated fadeInEffect');
    });

    $(".filter-forsale").click(function(){
        $(".all").fadeOut();
        $(".forsale").fadeIn().addClass('animated fadeInEffect');
    });

    $(".filter-all").click(function(){
        $(".all").fadeOut();
        $(".logo, .website, .packaging, .forsale, .all").fadeIn().addClass('animated fadeInEffect');
    });
});

尝试使用淡入动画:(失败)

$(".all").not('.packaging').fadeOut().addClass('animated  fadeOutEffect');
        $(".packaging").fadeIn().addClass('animated fadeInEffect');
    });

我该如何改进这段代码？