Question

equalheight = function(container){

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

       jQueryel = jQuery(this);
       jQuery(jQueryel).height('auto')
       topPostion = jQueryel.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 = jQueryel.height();
         rowDivs.push(jQueryel);
       } else {
         rowDivs.push(jQueryel);
         currentTallest = (currentTallest < jQueryel.height()) ? (jQueryel.height()) : (currentTallest);
      }
       for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
         rowDivs[currentDiv].height(currentTallest);
       }
     });
    }

    jQuery(window).load(function() {
     equalheight('.test-class');
    });


    jQuery(window).resize(function(){
        equalheight('.test-class');
    });

伙计们，我正在用它使所有div高度相等。它无法正常工作。但是，当我们打开检查元素时，它会起作用。伙计们能知道吗？

Answer 1

您可以使用css flex使其高度相等。您最终将通过javascript编写更多代码。这是最简单的解决方案，您还可以在div中添加边距填充以及任何所需的内容。

.row {
    display: flex;
    background-color: #343434;
}
.col {
    flex: 1;
    text-align: center;
    align-items: center;
    justify-content:center;
}

.s6 { background-color: #7dc242; }
.s7 { background-color: #ed1c24; }
.s8 { background-color: #EEEEEE; }

<div class="row">
    <div class="col s6">
        <div class="panel">
            content1
        </div>
        <div class="panel">
            content2
        </div>
    </div>
    <div class="col s7">
         <div class="panel">
            content3
        </div>
    </div>
    <div class="col s8">
         <div class="panel">
            content4
        </div>
        <div class="panel">
            content5
        </div>
        <div class="panel">
            content6
        </div>
    </div>
</div>

Javascript-Equel高度问题

1 个答案: