1

我已将同位素添加到一个响应迅速的投资组合网站，它正在做一些奇怪的事情。我希望它是 3 列，除非我的分辨率为 980 像素，而我希望它只是一个。事情是在非常高分辨率（超过 2000 像素）下，我只得到一个列，但如果它们在 3 处（33.333%），则宽度相同，所以它既不是一回事，也不是另一回事。我不知道是什么进行了更改，我检查了 css，但我看不到导致这种情况的任何线索。

发生这种情况的宽度也不一致。一旦我获得 2000 像素的分辨率，我就已经看到这种情况发生了，而下一次直到 2200 或类似的分辨率才会发生。我试图在这里的 jsfiddle 中重现它：

http://jsfiddle.net/zUfce/8/

但你可以在http://www.vitaminalemon.com/bm2/trabajos/看到我的 preprod 网站

我的同位素脚本：

var $container = $('#container');
    function resize_element(){
        var height=$('.element').width();
        $('.element').height(height);
    }
    resize_element();

    $container.isotope({
        itemSelector : '.element',
        animationEngine: 'best-available',
        filter: '.destacados',
        resizable: false, // disable normal resizing
        masonry: { columnWidth: $container.width() / 3 }
    });
    $(window).smartresize(function(){
        resize_element();
      $container.isotope({
        // update columnWidth to a percentage of container width
        masonry: { columnWidth: $container.width() / 3 }
      });
    });

    function initialize() {
       var divH = $('.proyect-title p').innerHeight()/2;
       var pageH = $('.proyect-title').innerHeight()/2;
      $('.proyect-title p').css({top: (pageH-divH)});
    }

    initialize();

    $(window).on('resize',function(){
      initialize();
    });


  var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

  $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    // make option object dynamically, i.e. { filter: '.my-filter-class' }
    var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[ key ] = value;
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
      // changes in layout modes need extra logic
      changeLayoutMode( $this, options )
    } else {
      // otherwise, apply new options
      $container.isotope( options );
    }

    return false;
  });

我为此添加了scss（那不是同位素css）

.element{
    cursor: pointer;
    width:100%;
            float: left;
            overflow: hidden;
            position: relative;
            background: #000;
            color: #fff;
    img{
        @include opacity(0.4);
        @include transition-property(opacity);
        @include transition-duration(1s); 
    }
    &:hover img, &.active-tag img{
        @include opacity(0.8);
    }
}
@media only screen and (min-width: #{$small-screen}){

    .element{
        width: 33.3333%;
    }

}
4

1 回答 1

1

你基本上遇到一个问题两次。舍入错误。

通过使用 /3 作为宽度，它实际上只能以适合容器的 2 列结束。

然后通过使用 33.3333% 作为元素宽度，这实际上超过了一个同位素列的宽度（非常轻微），并导致仅显示一列（适合的两列）。

将其更改为 33.3% 即可正常工作：

@media only screen and (min-width: 980px) {
  #trabajos .element {
    width: 33.3%;
  }

JSiddle在这里：http: //jsfiddle.net/TrueBlueAussie/zUfce/10/

于 2013-09-13T08:54:24.353 回答