Как наиболее кроссбраузерно и кроссплатформенно заверстать одинаковые по высоте и выравниваемые по центру строки блоки?

Question

[Станислав]

Суть такова. Есть секция на странице, в которой должны отображаться некие блоки. Ширина блоков фиксированная, предположим, что их должно умещаться по три в одной строке. Высота блоков в пределах одной строки должна быть одинаковой, но не фиксированной, то есть высота блоков в одной строке должна выбираться на основании высоты самого длинного блока в данной строке. Длина блока в свою очередь определяется исходя из объема текста внутри него.

Размещаться данные блоки в строке должны по ее центру, то есть если у нас два или один блок в строке - они будут по центру строки, если три - понятное дело заполняется вся строка, если четыре или пять, то три блока находятся на одной строке и один или два находятся по центру второй строки.

Вопрос: как наиболее совместимо со всеми браузерами, не забывая про IE8, это заверстать? IE важен потому, что сайт в основном из корпоративного сектора будет просматриваться, а они там известные фанаты Microsoft Windows XP и прочих девиаций в 2016 году.

Примерно объясняющие картинки (в целом это примеры в тексте выше):

Три в ряду, высота по самому длинному блоку:

Два в ряду, высота аналогично, блоки по центру строки:

Три в первому ряду, высота аналогично, во втором ряду высота у блока выбрана по тексту внутри него, так как других блоков на этой строке нет, сам блок на второй строке по центру:

Аналогично предыдущему, но во второй строке два блока, которые все так же по центру, плюс их высота определилась самым длинным блоком в строке (но только в текущей строке):

Comments

[Антон Федорян]

flexbox

[Станислав]

Антон Федорян: Вы точно заголовок прочитали? :-)

[Anton fon Faust]

Вычисляете высоту блоков в строке и назначаете с помощью javascript. На чистом css под требования ie8+ не возможно.

[Станислав]

Anton fon Faust: видимо, ваша правда, попробовал даже с table-cell - работает только в Opera и Chrome.

Answer 1

[Станислав]

В общем, проведя различные тесты и почитав что писали выше, пришел к выводу, что единственно верное решение все-таки скрипт плюс верстка. Вот код скрипта:

$('.products_row').each(function(){
		var arr = new Array;
		$(this).find(".products_grid").each(function(){
			arr.push($(this).height());
		});
		$(this).find(".products_grid").css("height", Math.max.apply(null,arr)+"px");
	});

Этот код решает проблему с одинаковой высотой в IE и Mozilla. То, что ниже - с выравниванием блоков посередине.

Код html:

<div class="products_wrapper">
    <div class="products_row">
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah</p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                 </p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah<br>
                      blah_blah<br>
                 </p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
    </div>
    <div class="products_row">
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                 </p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
        <div class="products_grid"
             style="background-image: url(blah_blah.png);">
            <div class="products_title">
                <p>blah_blah<br>
                    blah_blah<br>
                    blah_blah<br>
                    blah</p>
            </div>
            <div class="products_text">
                <h6>blah_blah</h6>
                <p>blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                      blah_blah<br>
                 </p>
            </div>
            <a href="#contact-form" class="products_order">blah_blah</a>
        </div>
    </div>
</div>

Код css (less):

.products_wrapper {
    width: 100%;
    margin: auto;
    .products_row {
      display: inline-table;
      width: 100%;
      padding-bottom: 20px;
      box-sizing: content-box;
      text-align: center;
      .products_grid {
        display: inline-table;
        max-width: 29%;
        min-height: 100%;
        margin: 0 1%;
        padding: 10px;
        cursor: crosshair;
        .products_title {
          display: table-row;
          p {
            padding: 5px;
          }
        }
        .products_text {
          display: table-row;
          min-height: 100%;
          h6, p {
            padding: 5px;
          }
        }
        .products_order {
          display: table-row;
          min-width: 100%;
          height: 35px;
          padding: 10px;
          text-align: center;
          font-size: 26px;
          line-height: 35px;
        }
      }
    }
  }

Многовато вышло в итоге кода, но кому нужно - разберется. Важно! Данный код не является решением для адаптивной верстки под устройства с различными экранами, ее нужно дописать отдельно.