5

这是我的辩论，问题已解决，但我无法弄清楚为什么 css-tricks.com 上使用的方法不起作用。我可以假设它不起作用的唯一原因是因为我的列是响应式的。

这是问题的一个jsfiddle。

解决方案 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解决方案

提琴手

我的 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 + ""});
4

2 回答 2

3

这似乎工作： 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;
}

在您的小提琴中，上面的代码丢失了吗？这实际上是使人造列效果起作用的一点。只是为了清楚起见；这些不是您放置内容的列，并且您的实际内容列的高度不相等。只有放置在内容后面的伪列是相等的。这可能是混乱吗？

于 2013-05-16T17:01:42.623 回答
0

添加：

此示例具有带边框的列和它们之间的间隙：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%;}

让我知道是否有不清楚的地方。

于 2013-05-16T19:07:26.057 回答