絕對位置div的寬度取決於其父寬度？

我想有一個絕對位置取決於其內容而不是其父母的div的寬度。例如，絕對位置div的寬度取決於其父寬度？

<div style="position:absolute"> 
<div style="position:absolute"> 
    <div style="position:absolute">Div in Div</div> 
</div> 
</div>

會導致自動換行，如圖http://jsfiddle.net/ymgfN/2/

它看起來像內部div的寬度將取決於其父母的寬度，即使它的位置是絕對的。例如，如果我們爲其父項指定寬度，它將按預期工作（不包含自動換行）：http://jsfiddle.net/ymgfN/3/

不幸的是，我無法提前指定父寬度 - 最終我將使其寬度取決於它的孩子。而且，我必須使用絕對位置。純CSS中可能嗎？

一些背景：我沒有試圖讓一個頁面完成一些設計 - 我知道這是瘋狂有任何合理的需求三個堆疊的絕對位置。相反，我正在做一些實驗，看看絕對定位是否可以成爲解決一系列佈局問題的通用方法（通常需要靈活使用靜態/絕對/浮點的多功能複雜佈局）。不幸的是，我遇到了這個問題，這將使得使用絕對位置的想法變得愚蠢。

來源

2012-03-16 Tom Yeh

如果指定的寬度到它的子元素，然後家長將調整到子元素的寬度。我不確定這是你在找什麼！.... – iDroid 2012-03-16 05:09:18

元素獲取其寬度和高度之前它從文檔流中被移除。當您完全放置外部元素時，它會從流中移除，並且由於它沒有直接內容，所以它的寬度爲0，高度爲0.因此，它內部的另一個試圖添加文本的除法元素會繼承父元素的寬度0所以它只會擴展到最長的單詞的寬度以允許內容，然後將其他所有內容打破爲新的行。之後這樣做，它將文檔流中的元素從其自身刪除。

因此，要回答你的第一個問題，是，絕對定位的元素不留意它的父元素的尺寸，如果你不指定元素本身的寬度和/或高度。你知道你孩子的寬度應該是多少？

至於你的第二個問題......你可以使用white-space: nowrap。不是一個很好的解決方案。更優選地，找到一種更好的方式來組織你的內容，所以你不需要三個絕對定位的元素嵌套在對方內。你說你有使用它們......真的嗎？更可能的是，你還沒有找到更好的方法來做到這一點，但如果你選擇走這條路，那還有另外一個問題。

來源

2012-03-16 05:15:42 animuson

是的，白色空間可以防止文字換行，但只有在屏幕（即身體）無法容納時纔可以換行？也就是說，爲了讓父母的寬度被設置爲100％（雖然我們沒有真正設置它，而是將CSS屬性設置爲子項）？ – 2012-03-16 09:35:26

@tomyeh：我現在想的唯一方法是設置'left：0;右：0「，然後在設置寬度時刪除」right「屬性。 – animuson 2012-03-16 19:06:31

+1。一直在尋找解釋上的寬度（與[該線程]（http://stackoverflow.com/questions/24713900/the-a-tag-content-goes-to-a-new-line/24714269#24714269））絕對定位的元素的孩子，沒有發現。在我偶然發現之前花了很長時間。不知道爲什麼它不會在搜索中出現更高的值。答案必須被接受嗎？ – Harry 2014-07-12 15:19:33

甲塊級元素與position: absolute或fixed如果沒有固定width設置自動綁定到其父寬度。如果您不希望爲子元素設置固定寬度，則可以通過給它一個非常高的值margin-right來有效解決此問題。

.inner-div { 
    position: absolute; 
    margin-right: -10000px; 
}

然後其寬度將被綁定到父減去負邊緣部的寬度，因此，實際上將只依賴於它的內容。

更新後的提琴：http://jsfiddle.net/ymgfN/53/

來源

2015-11-18 17:45:40

絕對位置div的寬度取決於其父寬度？

回答

相關問題