Question

所以我们假设有以下内容结构：

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

我想要在页面加载时实现的是，拾取第一个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
    });

如何根据以前的子宽度计算div的宽度

2 个答案: