HTML блоки одинаковой высоты в строке как сделать?

Question

[Игорь Пушкарский]

В общем суть проблемы такова нужно сверстать блок так что бы блоки в строке были одинаковой высоты, макет должен быть адаптивными и резиновыми, 3 колонки, 2 колонки и 1 колонка,

Хотелось бы взглянуть на решение без JS, поддержка ie 7+

Answer 1

[Дима Паутов]

flex-box
display: table > display: table-cell

Comments

[Игорь Пушкарский]

Ie7?

Answer 2

[Игорь Пушкарский]

Как обещал расскажу о найденном мною решении, конечно это костыль но на ум ничего больше не пришло, как сделать каждый второй и третий элемент вставлять еще 1 бок элемент

В моем случае это

<!--Сплитер для 3 плиток в ширину-->
          <div class="news-list-hr-3">
            <div class="news-list-hr-3__item">
              <div></div>
            </div>
            <div class="news-list-hr-3__item">
              <div></div>
            </div>
            <div class="news-list-hr-3__item">
              <div></div>
            </div>
          </div>

и

<!--Сплитер для 2 плиток в ширину-->
          <div class="news-list-hr-2">
            <div class="news-list-hr-2__item">
              <div></div>
            </div>
            <div class="news-list-hr-2__item">
              <div></div>
            </div>
          </div>

Полностью решение можно глянуть Битбакете
или на сайте (правда не знаю сколько там еще пролежит)
Так же не против выслушать Ваше мнение о подходе и о верстке в целом.