使相對位置的塊元素與其包含的絕對位置元素相同

好吧，我試圖抓取幾個div及其所有內容，並將它們堆疊在一起並使其包含div（＃疊加）通過以下的方法中出現的事物的正常流動：使相對位置的塊元素與其包含的絕對位置元素相同

CSS：

#stack 
{ 
    position:relative; 
    display:block; 
} 
#stack div 
{ 
    position:absolute; 
    left:0; 
}

HTML：

<div id="stack"> 
    <div> 
     <img src="images/1.jpg"> 
     <p> 
      First Image 
     </p> 
    </div> 
    <div> 
     <img src="images/2.jpg"> 
     <p> 
      Second Image 
     </p> 
    </div> 
    <div> 
     <img src="images/3.jpg"> 
     <p> 
      Third Image 
     </p> 
    </div> 
    <div> 
     <img src="images/4.jpg"> 
     <p> 
      Fourth Image 
     </p> 
    </div> 
</div>

哪個工作的，除了現在DIV＃堆疊具有的寬度/高度我唔我想它和它最大的孩子一樣大小。

在此先感謝您的幫助！

來源

2009-12-04 tscully

由於您正在使用position: absolute;從文檔流中抽取內部div，因此外部div無法伸展到最大孩子的尺寸。你必須使用JavaScript來達到這個效果。如果你熟悉的jQuery，你可以使用這樣的事情：

var w = false, h = false; 

$('#stack div').each(function() { 
    w = $(this).width() > w || !w ? $(this).width() : w; 
    h = $(this).height() > h || !h ? $(this).height() : h; 
}); 

$('#stack').css({ 
    width: w, 
    height: h 
});

來源

2009-12-04 20:47:12

您是否碰巧知道實現此目的的不同方式（例如，不將它們帶出文檔流程）？ – tscully 2009-12-04 20:49:28

不要，要將元素疊加在其他元素上，需要將它們從流中移出 - 這就是整個問題。所以javascript是你最好的選擇，讓它正常工作。 – 2009-12-04 20:50:48

真棒，這很好！我剛剛學習jQuery，並且正在向我提供同樣的解決方案，但是錯過了您的答案中發現的一兩件事。謝謝！ – tscully 2009-12-04 21:02:51

設置的位置是：絕對需要的節點退出該流程，這就是爲什麼家長，沒有任何流動的內容，得到爲0x0尺寸。

如果您的服務器代碼（例如PHP）知道這些圖像，您可以計算其中的最大寬度和最大高度，並適當設置父級的高度/寬度。或者，正如Tatu所說，您可以使用JavaScript並在客戶端進行操作。

來源

2009-12-04 20:49:51 jhurshman

您是否想要#stack的寬度收縮包裝它的孩子，還是隻關心其高度？我假設後者，因爲你明確地把display: block放在它上面。

因爲在這種情況下，有可能只是與CSS來做到這一點：

#stack { 
    overflow: hidden; 
    _zoom: 1; 
}  
#stack div { 
    float: left; 
    margin-right: -100%; 
}

我加入了_zoom: 1在IE6觸發hasLayout。您可以將其更改爲您的首選方法（例如，在單獨的IE6樣式表中），或者如果您不需要支持IE6，則可以將其全部保留。

在Opera中，當您浮動堆棧（或display: inline-block）並將width: 100%添加到子div時，您可以使#stack完全收縮其子元素（即寬度）。我不知道這是由於Opera中的錯誤，其他瀏覽器中的錯誤，還是由於模糊規範造成的差異。

來源

2009-12-04 23:18:25 mercator

使相對位置的塊元素與其包含的絕對位置元素相同

回答

相關問題