问题与响应列具有相同的高度 [英] Issue with Responsive Columns having equal height

问题描述

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

这是

解决方案1 ​​尼古拉斯Gallagher 方法

不行，为什么。因为我的客户可以随时添加另一个框（告诉我添加另一个框或减去一个框）。所以我需要我的代码来响应。我把css关掉了，但是如果你可以看看并告诉我如何使这个工作，这将是很好的。我坚持的部分是选择UL的孩子。

  .pseudo-three-col .col：n - 儿童（1）{左：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：将引用存储在事件处理函数之外：
 var catheight = $（'ul.categories'）。height（）; 
 
 $（'ul.categories li.clearfix'）。css（{height：+ catheight +}）; 
  

解决方案

这似乎起作用： http://jsfiddle.net/David_Knowles/LQ54K/
也许你可以分享哪一点你不明白？

  .top_category {
位置：相对;背景：无橙色; z-index：-1; 
} 
 .top_category：before，.top_category：after，
 .categories：before，.categories：after {
 content：; 
位置：绝对; 
 z-index：-1; 
 top：0;剩余
：20％; 
 width：20％; 
身高：100％; 
背景：#ccc; 
} 
 .top_category：在{
之前：0％; 
背景：#eee; 
} 
 .top_category：在{
 left：20％; 
背景：绿色; 
} 
 .categories：之前{
剩下：40％; 
背景：粉色; 
} 
 .categories：在{
 left：60％; 
背景：黄色; 
 
  

在你的小提琴中，上面的代码丢失了吗？这是真正使人造色彩效果起作用的那一点。只是为了清晰的缘故;这些不是您放置内容的列，并且您的实际内容列的高度并不相同。只有置于内容后面的伪列才会相同。这可能是混乱吗？

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

解决方案

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?

这篇关于问题与响应列具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！