Question

我的网站包含一系列div（以绿框表示），我每行只需要3个。但它们并非都是相同的高度，所以它会推动其他div不对齐。

见这里：

Screenshot

这是我的演示网站，如果向下滚动显示完整问题：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

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

Answer 4

你不需要JS。只需在设置了样式clear: both的包装器div中包装每行div。请参阅此codepen：http://codepen.io/anon/pen/GgyXNp

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

4 个答案: