具有相同高度的响应列的问题

Question

这是我的辩论,问题解决了,但我无法弄清楚为什么css-tricks.com上使用的方法不起作用.我认为它没有用的唯一原因是因为我的列是响应式的.

这是问题的一个方面.

解决方案1 Nicolas Gallagher方法

不工作,为什么.因为我的客户可以随时添加另一个框(告诉我添加另一个框,或减去一个框).所以我需要我的代码才能做出响应.我顺便把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 + ""});

Answer 1

这似乎有效： http: //jsfiddle.net/David_Knowles/LQ54K/ \n也许你可以分享你不明白的部分？

\n\n

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

\n\n

在你的小提琴中，上面的代码丢失了？这实际上是使人造柱效果发挥作用的部分。只是为了清楚起见；这些不是您放置内容的列，并且实际内容列的高度不相等。只有位于内容 \xe2\x80\x94 后面的伪列 \xe2\x80\x94 才相等。也许这就是混乱吗？

\n