如何根據以前的孩子計算格的寬度寬

Question

所以我們可以說有以下內容構成：

<div class="wrapper"> 
    <div class="contentOne" style="width:50px"></div> 
    <div class="contentTwo"></div> 
    <div class="contentThree"></div> 
    <div class="contentFour"></div> 
</div> 

我想實現在頁面加載，是爲第1 div的寬度（contentOne ）被拾起並將其他3個div的寬度增加50px。最後，我想要以下內容：

<div class="wrapper"> 
    <div class="contentOne" style="width:50px"></div> 
    <div class="contentTwo" style="width:100px"></div> 
    <div class="contentThree" style="width:150px"></div> 
    <div class="contentFour" style="width:200px"></div> 
</div> 

一等獎將爲此可能使用CSS3 Calc。如果不是，JS將會成爲第一位公主。

謝謝

Answer 1

眼下，CSS已經沒有前同輩選擇（雖然有一個「兄弟之後」選擇，出於某種原因），所以一個純CSS的解決方案是沒有可能的。 jQuery會是這樣的：

$('div:not(:first)').each(function() 
{ 
    $(this).width($(this).prev().width() + 50); 
}); 

Answer 2

對此使用jquery。代碼會是這樣的。請進行適當的更改，這只是一個演示代碼。

var widthOfFirstChild=$('.wrapper').eq(1).width(); 
    $('.width div').each(
    function(){ 
    $(this).attr('style':widthOfFirstChild+50); 
    widthOfFirstChild=+50 
    });