Проблема с отзывчивыми столбцами, имеющими одинаковую высоту

Вот мои дебаты, проблема решена, но я не могу понять, почему метод, используемый на css-tricks.com, не работал. Единственная причина, по которой я могу предположить, что это не сработало, заключается в том, что мои столбцы отзывчивы.

Вотjsfiddle проблемы.

Решение 1Николас Галлахер метод

Не будет работать, почему. Потому что мой клиент может в любое время добавить еще одну коробку (скажите мне, чтобы добавить другую коробку, или минус коробку). Поэтому мне нужен мой код, чтобы быть отзывчивым. Я снял css, кстати, но если вы можете посмотреть и сказать мне, как сделать эту работу, было бы неплохо. Моя часть, в которой я застрял, связана с выбором детей UL.

.pseudo-three-col .col:nth-child(1) { left: 33%; }
.pseudo-three-col .col:nth-child(2) { left: -33.3%; }
.pseudo-three-col .col:nth-child(3) { left: 0; }
Решение 2JQuery решение

Jsfiddle

Мой jQuery фиксирует высоту моего неупорядоченного списка и применяет его к высоте элементов моего списка. Работает отлично. Но я настоящий CSS-разработчик и не хочу jQuery кодировать вещи, которые не должны быть. Временные ограничения привели к этому решению.

    $(".basic:last-child").show();
       // Optimalisation: Store the references outside the event handler:
    var catheight = $('ul.categories').height();

    $('ul.categories li.clearfix').css({"height" : "" + catheight + ""});

Ответы на вопрос(2)

Ваш ответ на вопрос