css - 查找 div 宽度

Question

我有三个div。两个较小的在同一个容器内，即第三个 div。

• 第一个子 div 大小为 350x350 像素。
• 第三个 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 calc()：

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

对于 IE8 及更低版本，您必须使用 jQuery 或 javascript

Answer 2

我认为您需要像这样使用一些CSS：

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

这是一个工作示例（添加样式以查看效果）

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';

Answer 4

您可以使用纯 css 定位来做到这一点，因为您知道第一个孩子有多大：

#container {
position:relative
}

#first_child {
width:350px;
height:350px
}

#second_child {
height:350px;
position:absolute;
top: 0;
left:350px;
right:0;
}

请注意，容器 div 具有 position:relative。这是使 position:absolute 使用容器 div 的左上角而不是 body 所必需的。

Answer 5

使用 jQuery：

var containerWidth = $('#container').width();
$('#second_child').width(containerWidth - 350);