这里是我的辩论，问题就解决了，但我不能弄清楚为什么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; }
解决方案2 的jQuery溶液
的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 + ""});
这似乎工作： http://jsfiddle.net/David_Knowles/LQ54K/也许你可以分享其中位你不明白吗？
.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;
}
在你的小提琴，上面的代码失踪？ 它是实际上使虚假列效果的工作位。 只是为了清晰，; 这些都不是你把你的内容列，和你的实际内容列的高度不做出相等。 只有伪列 - 这放在后面的内容 - 相等。 是，也许是困惑？
加成：
这个例子有列有边界和它们之间的差距： http://jsfiddle.net/David_Knowles/Vz5pT/
这是两列之间应用伪差距的XTRA码
.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%;}
让我知道如果有成才说不清楚。
