Issue with Responsive Columns having equal height

问题:

Here is my debate, the problem is solved, but I cant figure out why the method used on css-tricks.com didnt work. The only reason I can assume it didnt work was because my columns are responsive.

Here is a jsfiddle of the problem.

Solution 1 Nicolas Gallagher Method

Wont work, why. Because my client could at any time add another box (tell me to add another box, or minus a box). So I need my code to be responsive. I took the css off btw, but if you can look and tell me how to make this work, it would be nice. My portion i am stuck at is with selecting of the children of the 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; }

Solution 2 jQuery solution

Jsfiddle

My jQuery captures the height of my Unordered List and applies it to my List items height. Works perfectly. But Im a true CSS developer and dont want to jQuery code things that dont need to be. Time constraints have led to this solution.

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

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

回答1:

This seems to work: http://jsfiddle.net/David_Knowles/LQ54K/ Perhaps you can share which bit you didn't understand?

.top_category {
    position: relative; background:none orange; z-index: -1;
}
.top_category:before, .top_category:after,
.categories:before, .categories:after {
   content: " ";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 20%;
   width: 20%;
   height: 100%;
   background: #ccc;
}
.top_category:before {
   left: 0%;
   background: #eee;
}
.top_category:after {
   left: 20%;
   background: green;
}
.categories:before {
   left: 40%;
   background: pink;
}
.categories:after {
   left: 60%;
   background: yellow;
}

In your fiddle, the above code was missing? Which is the bit that actually makes the faux column effect work. Just for clarities sake; these are not the columns you place your content in, and the height of your actual content columns is NOT made to be equal. Only the Pseudo columns — which are placed behind the content — are made equal. Is that perhaps the confusion?

回答2:

ADDITION:

This example has columns with borders and a gap between them: http://jsfiddle.net/David_Knowles/Vz5pT/

This is the xtra code that applies the psuedo gaps between columns

.categories li:after {
    background: none #FFFFFF;
    border-color: #555555;
    border-style: solid;
    border-width: 0 1px;
    bottom:0;
    content: "";
    display: block;
    left: 20%;
    margin: 0 0 0 -2px;
    position: absolute;
    top: 0;
    width: 4px;
    z-index: 1;
}
.categories li:nth-child(2):after {left: 40%;}
.categories li:nth-child(3):after {left: 60%;}
.categories li:nth-child(4):after {left: 80%;}

Let me know if there is someting that is not clear.