求div宽度

Question

我有三块钱。两个小的在同一个容器里，第三个div。

• 第一个孩子div是350x350 px大。
• 第三个div是另一个容器div的89%，这意味着我不知道它的大小。
• 我想使第二个子div在第一个子div和容器div的边缘之间。

基本上：

<div id="container">
    <div id="first_child" style="width:350px; height:350px;">&nbsp;</div>
    <div id="second_child" style="width:???px; height:350px;">&nbsp;</div>
</div>

如何计算second_child元素的宽度，如果我希望second_child元素精确地跨越first_child元素和container的边缘

编辑:上传了一个快速绘制的图像。大黑方是container，尺寸未知。红色盒子是first_child，蓝色盒子是second_child。我想找到second_child的宽度，所以它将从first_child的末尾延伸到container的右边边缘。

​

​

Answer 1

我认为您需要的是使用如下所示的css：

#container {
    width:89%;
    height:350px;
}
#first_child {
    float:left;
    width:350px;
    height:350px;
}
#second_child {
    height:350px;
    margin-left:350px;
}

下面是一个有用的例子 (添加样式以查看效果)

Answer 2

您可以使用CSS calc()。

#second_child {
   width: -moz-calc(100% - 350px);
   width: -webkit-calc(100% - 350px);
   width: calc(100% - 350px);
}

对于IE8和更低的用户，您必须使用jQuery或javascript

Answer 3

上面给出了纯CSS的一个很好的答案，所以我将回答“如何找到所需的宽度？”在javascript里。

// This is assuming there is no padding.
totalWidth = document.getElementById('container').offsetWidth;
firstChildWidth = document.getElementById('first_child').offsetWidth;
document.getElementById('second_child').style.width = (totalWidth - firstChildWidth) + 'px';