如何使每个 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; 时，这似乎太过分了...给它们一个最小高度以使其更强大。

Answer 2

使用

display: table
display: table-cell

密码笔：http://codepen.io/anon/pen/mypGBV

Answer 3

您可以使用 ma​​x-height 来强制 div（这会导致麻烦）不要大于特定值。例如，将所有 3 个 div 设置为 max-height:50px。它们不会变大并保持一致。

Answer 4

你不需要 JS。只需将每一行 div 包装在一个包装器 div 中，并设置为 clear: both 样式。请参阅此代码笔：http://codepen.io/anon/pen/GgyXNp