在計算表達式中使用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（薩斯）：

.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的左側分開）。

來源

2016-07-27 Daniel

好，如果你使用青菜已經何不爲此創建混入或功能？ – MMachinegun

絕對定位是佈局網頁的一種非常糟糕的方法。它非常不靈活，並且有更好更快的響應選項。看看[** LearnLayout.com **]（http://learnlayout.com/） –

對我來說，你所要求的只是將這些元素排成一行......你不需要爲此定位。 –

你不能像@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>

來源

2016-07-27 15:18:39 nicael

我的實際元素是絕對div。 – Daniel

@Daniel這與絕對的divs一起工作。 – nicael

我添加了我的實際代碼 – Daniel

否;你不能那樣做。

的counter功能可以幾乎做到這一點，但它不能與calc()要麼使用。

來源

2016-07-27 15:16:06 SLaks

那麼有什麼辦法可以做這樣的事情嗎？根據之前的兄弟左邊距給出一個元素左邊距？ – Daniel

在計算表達式中使用n變量

回答

相關問題