在计算中使用 n
Using n inside calc
我可以在 calc 表达式中使用 n 变量吗?
例如:
.child:nth-child(n) {
margin-left: calc(n * 46px);
}
我的代码:
<div class="share-buttons">
<div class="share-button-main"></div>
<div class="share-button share-facebook">
<img src="facebook.png" alt="" />
</div>
<div class="share-button share-whatsapp">
<img src="whatsapp.png" alt="" />
</div>
<div class="share-button share-email">
<img src="email.png" alt="" />
</div>
<div class="share-button share-sms">
<img src="sms.png" alt="" />
</div>
</div>
CSS (Sass):
.share-buttons {
position: relative;
display: flex;
.share-button-main {
width: 46px;
height: 46px;
z-index: 2;
cursor: pointer;
content: url('share-menu-share-closed.png')
}
.share-button {
position: absolute;
top: 0;
left: 0;
width: 46px;
height: 46px;
z-index: 1;
transition: all .3s ease;
opacity: 0;
}
&.open {
.share-button-main {
content: url('share-menu-share-opened.png')
}
.share-button {
opacity: 1;
}
.share-facebook {
left: 56px;
}
.share-whatsapp {
left: 112px;
}
.share-email {
left: 168px;
}
.share-sms {
left: 224px;
}
}
img {
width: 46px;
height: 46px;
}
}
Javascript (JQuery):
$('.share-button-main').click(function() {
$('.share-buttons').toggleClass('open');
});
我基本上是在尝试实现菜单的动态打开效果,所以如果我添加或删除元素,它仍然可以工作(而不像现在,当我分别设置每个 div 时) .
否;你不能那样做。
counter
功能几乎 可以做到这一点,除了它不能与 calc()
一起使用。
如@SLaks 所述,您不能。但这可以通过将每个下一个元素放在前一个元素中来解决。
用 div 查看:
div {
margin-left: 46px
}
<div>test
<div>test
<div>test
<div>test</div>
</div>
</div>
</div>
或者,使用 jQuery.
var margin=0;
$("div").each(function(){
$(this).css("margin-left",margin+=46)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
不完全是你想要的,但如果你知道元素的数量,你可以用 scss 达到类似的效果。请记住,这会产生很多 css:
@for $i from 1 through 7 {
&:nth-child(#{$i}) {
margin-left: calc(#{$i} * 46px);
}
}
我可以在 calc 表达式中使用 n 变量吗?
例如:
.child:nth-child(n) {
margin-left: calc(n * 46px);
}
我的代码:
<div class="share-buttons">
<div class="share-button-main"></div>
<div class="share-button share-facebook">
<img src="facebook.png" alt="" />
</div>
<div class="share-button share-whatsapp">
<img src="whatsapp.png" alt="" />
</div>
<div class="share-button share-email">
<img src="email.png" alt="" />
</div>
<div class="share-button share-sms">
<img src="sms.png" alt="" />
</div>
</div>
CSS (Sass):
.share-buttons {
position: relative;
display: flex;
.share-button-main {
width: 46px;
height: 46px;
z-index: 2;
cursor: pointer;
content: url('share-menu-share-closed.png')
}
.share-button {
position: absolute;
top: 0;
left: 0;
width: 46px;
height: 46px;
z-index: 1;
transition: all .3s ease;
opacity: 0;
}
&.open {
.share-button-main {
content: url('share-menu-share-opened.png')
}
.share-button {
opacity: 1;
}
.share-facebook {
left: 56px;
}
.share-whatsapp {
left: 112px;
}
.share-email {
left: 168px;
}
.share-sms {
left: 224px;
}
}
img {
width: 46px;
height: 46px;
}
}
Javascript (JQuery):
$('.share-button-main').click(function() {
$('.share-buttons').toggleClass('open');
});
我基本上是在尝试实现菜单的动态打开效果,所以如果我添加或删除元素,它仍然可以工作(而不像现在,当我分别设置每个 div 时) .
否;你不能那样做。
counter
功能几乎 可以做到这一点,除了它不能与 calc()
一起使用。
如@SLaks 所述,您不能。但这可以通过将每个下一个元素放在前一个元素中来解决。
用 div 查看:
div {
margin-left: 46px
}
<div>test
<div>test
<div>test
<div>test</div>
</div>
</div>
</div>
或者,使用 jQuery.
var margin=0;
$("div").each(function(){
$(this).css("margin-left",margin+=46)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
不完全是你想要的,但如果你知道元素的数量,你可以用 scss 达到类似的效果。请记住,这会产生很多 css:
@for $i from 1 through 7 {
&:nth-child(#{$i}) {
margin-left: calc(#{$i} * 46px);
}
}