Question

我使用jQuery使我的所有div都达到相同的高度。（这似乎是我的代码唯一的解决方案）。我还使用一些css来反转移动设备的div顺序，因此标题总是显示在图像下方。在铬，野生动物园和歌剧中，一切都很完美（调整大小和排列正确）。然而，在Firefox中，这些照片似乎没有调整大小，一切都没有了。很奇怪，如果你在任何刹车（在Firefox中）刷新浏览器，它会弹出到位，但同样，它不会随窗口调整大小。

我感觉它可能是高度脚本或重新排序的CSS。但我无法弄清楚造成这种情况的原因。

请参阅下面的代码。非常感谢任何帮助。

// ****************************************************
// MATCH COLUMN HEIGHT
// ****************************************************

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.eqHeight');
});


$(window).resize(function(){
  equalheight('.eqHeight');
});

重新排序div的CSS

.portThumb {
overflow: hidden;
display:table;
@include margin ($half-spacing - 7, -bottom);

    @include breakpoint(sm) { /* SM */
    @include margin ($half-spacing + 5, -bottom);
    }

    @include breakpoint(md) { /* MD */
    @include margin (-1px, -bottom);
    }

    img {
    width: 100%;
    max-width: 100%;
    height: auto;
    } /* /img */

    .fadeActive {
    @include opacity(1, 100, 1);
    }

    .fadeInactive {
    @include opacity(1, 30, .3);
    }
} 

.bottom {
display:table-footer-group; 
}

.top.xsSplit100 {
display:table-header-group;
float:none;

    @include breakpoint(md) {
    float:left;
    }
}

Answer 1

如果您使用纯CSS保持调整大小的块元素的宽高比，我认为性能会更好。请查看this answer。

调整大小不适用于Firefox

1 个答案: