Есть ли в HTML+CSS современный способ сделать колонки одинаковой высоты?

Question

[eldar_web]

Ищешь в интернете, а там разные варианты с костылями.
Нету ту ли современный способ сделать этого включая последние версии HTML и CSS?
Вот в этом примере: codepen.io/anon/pen/jWNGwX

Answer 1

[Vadim Bogomazov]

jsfiddle.net/gLpqoyfa

Answer 2

[L0k1]

flexbox
или
display: table-cell
или еще че-нить

Answer 3

[Дмитрий Беляев]

<table class='wrapper'><tr>
  <td class='left_block'>
    111111111111
    111111111111
    111111111111
  </td>
  <td class='right_block'>
    222222222222
    222222222222
  </td>
</tr></table>

.left_block {
  width: 100px;
  background-color: black;
  color: #fff;
  vertical-align: top;
}

.right_block {
  width: 100px;
  background-color: yellow;
  vertical-align: top;
}

и не изобретать велосипедов

Comments

[IceJOKER]

в ногу со временем....

[eldar_web]

Это уже называется табличная верстка, но обычно используют блочную.

[Дмитрий Беляев]

eldar_web: Никто не мешает завернуть таблицу в блок
IceJOKER: Старье, но работает, естественно верстать так базу для страницы не стоит, но я так понимаю из примера тут лишь небольшой контейнер для вывода данных

[IceJOKER]

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

Answer 4

[rodriguezserhio]

https://codepen.io/anon/pen/OzqzRQ

<div class='w1'>
  <div class="w2">
    <div class='left block'>111</div>
    <div class='right block'>222</div>
    <div class='clear'></div>
  </div>
</div>


* {margin:0;padding:0;box-sizing:border-box;}
.w1{
  background-color: #888;
  width:800px;
  overflow:hidden;
}

.w2{
  position:relative;
  background-color: #ccc;
  right:-400px;
}

.block{
  width: 390px;
  float: left;
  margin:5px;
  left:-400px;
  position:relative;
}

.left  {border:1px solid #0ff;}
.right {border:1px solid #0f0;}
.clear { clear: both; }

2 обертки, одна задает цвет 1 колонке, 2 -2-й;
вторая колонка съезжает в право на ширину первой
обе колонки съезжают влево на ширину первой. как-то так...