我正在尝试根据他们的兄弟姐妹来调整几个兄弟div的位置.目前,他们都是绝对的,但这并不是一成不变的.
它们每个都有几百个像素高,但是我希望它们彼此重叠,这样后面的那些只能“偷看”在前面几个像素之上.我能想到的最简单的方法是使用nth-of-type的Less mixin,而不是仅将规则应用于匹配的一个索引,而是将索引传递给mixin.基本上,我想要这个:
&:nth-of-type(@n) { top: @n * 20px; }
编辑:我目前在做什么:
&:nth-of-type(1) { .card_offset(1); } &:nth-of-type(2) { .card_offset(2); } &:nth-of-type(3) { .card_offset(3); } &:nth-of-type(4) { .card_offset(4); }
显然这不是最理想的.在Less中有更好的方法吗?
或者,是否存在类似’layout-height’的CSS字段,它会在布局中给div一定的高度(而不是它的全高)?
解决方法
假设你事先知道元素的数量(或者以某种方式重新计算你的css),那么基本上你有什么工作,如果
put into a loop structure我最初发现
here on stack overflow.
LESS代码
.loop(@index) when (@index > 0) { //set top amount &:nth-of-type(@{index}) { //NOTE: 1.3.3 and under is just @index,not @{index} top: @index * 20px; } // next iteration .loop(@index - 1); } // end the loop when index is 0 .loop(0) {} .yourElem { @n: 6; //num of elements (Could skip this and just put number in) .loop(@n); }
.yourElem:nth-of-type(6) { top: 120px; } .yourElem:nth-of-type(5) { top: 100px; } .yourElem:nth-of-type(4) { top: 80px; } .yourElem:nth-of-type(3) { top: 60px; } .yourElem:nth-of-type(2) { top: 40px; } .yourElem:nth-of-type(1) { top: 20px; }
原文地址:https://www.jb51.cc/html/227222.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。