2011-09-21 172 views
2

假設我有一堆左邊的div,像一個時尚網格。這些在一個固定寬度的容器中。第一排浮動元素的寬度?

現在我想知道第一排的寬度!以便我可以將該寬度與固定寬度進行比較,並查看是否有大量空白,我想通過將容器寬度設置爲第一行元素的寬度來最小化。

現在,難度是,當我浮動的元素沒有第一或第二行的概念..嗯,我真的不需要知道第一行寬度persé,我只需要知道nr白色的,空的空間像素旁邊的最後一個元素到容器的右側..

見這個例子:http://i54.tinypic.com/256wdjn.png(不介意浮華的色彩,只是爲了測試)

權一邊有太多的白色空間..我不能只是預先計算這個邊緣,邊緣寬度,圖像寬度等都是動態的..

謝謝!

回答

3

大體上,你可以做的是循環嵌套元素,並使用.offset().top.position().top。如果元素nn+1是第一個具有不同頂部偏移的元素,則它們必須位於不同的行中。

然後添加元素0n(連同它們的填充,邊框和邊距)的寬度以獲取該行的總寬度。

(呵呵,不要忘了你的退出循環,因爲你只需要計算第一行。)

+0

很好,謝謝! – Wesley

0

我不知道它的工作原理爲浮動子節點,但你可以嘗試添加「顯示:inline-block的」到容器DIV沒有指定寬度和高度。這種方式容器越來越窄...如果這就是你正在尋找的。

+0

我必須設置一個寬度,因爲我正在製作一個旋轉木馬,點擊next/prev時必須更新它的scrollLeft。有divs(頁面)左側浮動,裏面是我認爲是內聯阻止的圖像。如果我在設置它之前嘗試獲取寬度(),它只會返回零。 – Wesley

0

好了,你還沒有真正告訴我們您的HTML,所以很難以非常具體建議,但我知道要做到這一點的唯一方法是測量網格元素的大單是如何它在頁面後然後將容器設置爲最接近的整數倍,以便容器中沒有額外的空間。

jQuery具有非常有用的方法.width().innerWidth().outerWidth(),這取決於您正在嘗試做什麼。

如果容器本身具有保證金或填充,那麼你將不得不在計算這就給其內部空間的整體量容器所需的寬度,以說明。

+0

由於某種原因,當我想獲得這個div的寬度時,jquery返回零。 (在document.ready中) – Wesley

+0

您必須向我們展示HTML和代碼,以便我們進一步提供幫助 - 否則我們所能做的就是提供瘋狂的猜測。 jQuery的'。width()'適用於頁面中可見的元素。 – jfriend00

0

你過於複雜了。你真的不需要這樣做。你總是有這樣的4張圖片嗎?如果是這樣,你可以在元素容器上使用width: 25%; text-align:center;

+0

不,它可以只是1張圖片,10張圖片,100張圖片。 – Wesley