查找div寬度

我有三個div。兩個較小的是在同一個容器裏面，第三個div。查找div寬度

第一個子div是350x350像素大。
第三格是另一個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右邊緣伸展。

來源

2013-04-12 Simon Carlson

目前尚不清楚你想要什麼。你能畫一張照片嗎？ – musefan

[這樣的事情？]（http://jsfiddle.net/3x8aX/） – musefan

圖片上傳。希望它清除一點點。 –

我想你需要的是用一些CSS像這樣：

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

Here is a working example（添加樣式，看看效果）

來源

2013-04-12 15:19:23 musefan

爲什麼'＃second_child'上的'margin-left：350px'是必要的？ – 2016-02-12 12:11:19

dunno ...我在3年前就做過了。如果它在沒有它的情況下適合你，那麼就這樣吧。雖然我預計當天有一些原因在那裏 – musefan

可以使用CSS calc()做：

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

對於IE8和更低的你將不得不使用jQuery或JavaScript

來源

2013-04-12 15:06:03 Morpheus

可能是有益的補充說，這可能是一個很好的做法，宣佈'盒子大小：邊框 - 對孩子來說，根據填充的優點，邊界寬度將會增加元素的聲明寬度。 – Terry

@Terry你可以減去填充以及:)讓我們說'calc（100％-350px - 20px（padding 10px from both sides））';無論如何，感謝指出;） – Morpheus

當你的填充是基於百分比時，它會變得更有問題;） – Terry

使用jQuery：

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

來源

2013-04-12 15:06:58 dezman

你可以用純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。這是必要的使位置：絕對使用容器div的左上角而不是正文。

來源

2013-04-12 15:15:31 Anpan

我的容器的寬度是未知的，這就是問題在這裏。 –

您不需要知道容器的寬度。只有第一個孩子的寬度必須知道。情況就是這樣（350px）。用左：350px（第一個孩子的智慧），右：0將第二個孩子伸展到容器的寬度。 – Anpan

一個很好的答案用純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';

來源

2013-04-12 15:16:43 Goodwine

非常感謝。我會用musefan的答案作爲它的更簡單並解決我的問題，但這在未來可能會有用。 Upvoted。 –

回答

相關問題