javascript - 如何使每个 div 具有相同的高度，以保持每行 3 个 div 对齐工作

Question

我的网站包含一系列 div(由绿色框表示)，每行只需要 3 个。但它们的高度并不相同，因此会导致其他 div 失去对齐效果。

请参阅此处:

这是我的演示网站，如果您向下滚动，则会显示完整的问题:http://testsite24.netai.net/public/demo.html

以下是其中一个 div(绿色框)的代码示例:

<div class="block personal fl">

                <!-- CONTENT -->
               <div class="content">
                  <p class="price">
                    <p class="vignette" style="background-image:url()"></p>
                  </p>

               </div>

                <ul class="features">
    <li class="titlebox">59 Acre Paradise</li>
    <li>Kings County</li>
    <li>Offered at $95,000</li>
                  </ul>

</div>

您能否提供一种解决方案，使所有 div 高度相同，以便它们保持对齐？该解决方案必须适用于 IE8+。也许有一个脚本可以识别行中最长的 div 并使其他两个具有相同的高度？

以前我使用过这个脚本，但 IE8/IE9 不支持 FlexWrap，所以我不得不废弃它。有任何想法吗？谢谢!!

<script>

;( function( $, window, document, undefined )
{
    'use strict';

    var s = document.body || document.documentElement, s = s.style;
    if( s.webkitFlexWrap == '' || s.msFlexWrap == '' || s.flexWrap == '' ) return true;

    var $list       = $( '.list' ),
        $items      = $list.find( '.list__item__inner' ),
        setHeights  = function()
        {
            $items.css( 'height', 'auto' );

            var perRow = Math.floor( $list.width() / $items.width() );
            if( perRow == null || perRow < 2 ) return true;

            for( var i = 0, j = $items.length; i < j; i += perRow )
            {
                var maxHeight   = 0,
                    $row        = $items.slice( i, i + perRow );

                $row.each( function()
                {
                    var itemHeight = parseInt( $( this ).outerHeight() );
                    if ( itemHeight > maxHeight ) maxHeight = itemHeight;
                });
                $row.css( 'height', maxHeight );
            }
        };

    setHeights();
    $( window ).on( 'resize', setHeights );
    $list.find( 'img' ).on( 'load', setHeights );

})( jQuery, window, document );

</script>

Answer 1

当您可以在项目上使用 vertical-align:top; 时，这似乎太过分了...给它们一个最小高度以使其更强一点。