jquery - 匹配另一个使用 width:auto 的 div 的宽度；然后向其中添加 x 金额

Question

当另一个 div 使用 width:auto; 时，无论如何我可以让一个 div 匹配另一个 div 的宽度吗？并根据内容动态变化。然后在宽度上添加额外的像素。

例如...

jsFiddle

HTML

<div id="div1">
    <div id="filler"></div>
    <div id="filler"></div>
    <div id="filler"></div>
</div>
<div id="div2"></div>

CSS

#div1 {
    position:absolute;
    height:100px;
    width:auto;
    min-width:100px;
    background-color:blue;
    padding-right:10px;
}

#div2 {
    position:absolute;
    height:100px;
    min-width:100px;
    top:150px;
    background-color:red;
}

#filler {
    position:relative;
    height:80px;
    width:80px;
    top:10px;
    margin-left:10px;
    background-color:yellow;
    float:left;
}

如何使 div2 匹配 div1 的宽度，然后添加 100px 到它？这样无论我在 div 1 中放入多少填充 div，div 2 的宽度都将始终相同 +100？

像...（div2 宽度）=（div1 宽度）+ 100

我怀疑 Jquery 会以某种方式参与，所以我将它添加到我的标签中。

Answer 1

您是否尝试过：

 $('#div2').width( $('#div1').outerWidth() + 100 )

函数 outerWidth() 包括 div 边框。

Answer 2

您能否将内部 div 绝对定位在外部 div 中并设置left: 0和right: -100px（隐式设置width: auto）？