这是我的辩论,问题解决了,但我无法弄清楚为什么 css-tricks.com 上使用的方法不起作用。我可以假设它不起作用的唯一原因是因为我的专栏是响应式的。
这是一个jsfiddle的问题。
解决方案 1 Nicolas Gallagher方法
不会工作,为什么。因为我的客户可以随时添加另一个框(告诉我添加另一个框,或减去一个框)。所以我需要我的代码能够响应。顺便说一句,我去掉了 css,但如果你能看看并告诉我如何使它工作,那就太好了。我坚持的部分是选择 UL 的 child 。
.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解决方案
我的 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;
}
在您的 fiddle 中,上面的代码丢失了吗?这是真正使人造柱效果起作用的一点。只是为了清楚起见;这些不是您放置内容的列,并且实际内容列的高度不相等。只有放置在内容后面的伪列是相等的。这可能是困惑吗?
关于jquery - 具有相同高度的响应列的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16592597/