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

Question

My site contains a series of divs (represented by green boxes), and I only need 3 per row. But they're not all equal height, so it pushes the other divs out of alignment.

See here:

and here's my demo site showing the full issue if you scroll down: http://testsite24.netai.net/public/demo.html

Here's an example of the code for one of the divs (green boxes):

<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>

Can you offer a solution to make all div heights the same height, so they stay in alignment? The solution must work for IE8+. Perhaps a script to identify the longest div in the row and make the other two the same height?

Previously I used this script, but FlexWrap isn't supported by IE8/IE9 so I had to scrap it. Any ideas? Thank you!!

<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

This seems super excessive when you can just use vertical-align:top; on the items... Give them a min-height to make it a bit stronger.

Answer 2

use

display: table
display: table-cell

Code pen: http://codepen.io/anon/pen/mypGBV

Answer 3

you can use max-height to force the div(which is causing trouble) not to get bigger than the particular value. For Example set all 3 divs to max-height:50px. They won't get bigger and remain aligned.

Answer 4

You don't need JS for this. Just wrap each row of divs in a wrapper div with the style clear: both set. See this codepen: http://codepen.io/anon/pen/GgyXNp