Problem mit gleich hohen Responsive Columns

Hier ist meine Debatte, das Problem ist gelöst, aber ich kann nicht herausfinden, warum die auf css-tricks.com verwendete Methode nicht funktioniert hat. Der einzige Grund, warum ich davon ausgehen kann, dass es nicht funktioniert hat, ist, dass meine Spalten reagieren.

Hier ist einjsfiddle von dem Problem.

Lösung 1Nicolas Gallagher Methode

Wird nicht funktionieren, warum. Weil mein Kunde jederzeit eine weitere Box hinzufügen kann (bitte ich, eine weitere Box hinzuzufügen, oder abzüglich einer Box). Also muss mein Code reagieren. Ich habe das CSS übrigens entfernt, aber wenn Sie mir sagen können, wie ich das machen soll, wäre es schön. Mein Teil, bei dem ich stecke, ist die Auswahl der Kinder der 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; }
Lösung 2jQuery Lösung

Jsfiddle

Meine jQuery erfasst die Höhe meiner ungeordneten Liste und wendet sie auf die Höhe meiner Listenelemente an. Funktioniert perfekt. Aber ich bin ein echter CSS-Entwickler und möchte nicht Dinge jQuery-Code, die nicht sein müssen. Zeitliche Einschränkungen haben zu dieser Lösung geführt.

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

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

Antworten auf die Frage(2)

Ihre Antwort auf die Frage