如何擴大div的寬度以超出其父寬度？

這是代碼如何擴大div的寬度以超出其父寬度？

<div id="container"> 
    <article> 
     <p>contents</p> 
     <img ... /> 
     <footer>meta data</footer> 
    </article 
</div> 

#container{ 
    width:960px; 
      } 
article{ 
    width:640px; 
     } 
footer, img{ 
    width:960px; /*well I may want it 640px but float right all the way back to the edge of #container*/ 
     }

頁腳和圖像不採取該寬度的一個片段;我嘗試了position:absolute，它能正常工作，但即使將position: relative添加到容器中，它們也會到達頂端。

通常我會關閉文章標籤，添加圖像，然後從文章開始。這不是一個理想的解決方案。

來源

2011-12-12 aurel

首先，請確保您沒有在此問題中的實際代碼中存在任何錯誤。藥水：絕對無能爲力。其次，確保您使用嚴格的文檔類型。第三，請說明問題更清楚一些，以及您嘗試解決問題的方法。 – Zoidberg

如果您試圖限制「內容」的寬度，爲什麼不設置'p'元素的寬度而不是'article'？然後你不必擔心在文章的邊界之外。然後浮動'img'將會一直推到'＃container'的右邊界。 – justis

我真的很抱歉我的錯誤在這個問題上。在發佈之前，我確實閱讀了3次 - 對不起 – aurel

首先，它們需要是block或inline-block才能接受寬度。浮游物可能會導致怪異的包裝。你可以嘗試overflow: visible看看它是否有幫助。

來源

2011-12-12 18:30:46

感謝這很好用 – aurel

-1

您的定位正確。你想設置的容器相對，然後內部元件設置爲絕對的，固定的右上角：

#container{ width:960px; position: relative; } 
img, footer{ width:960px; position: absolute; right: 0px; top: 0px;}

絕對定位的元素相對於它的第一個定位的祖先，所以內部元件是基於定位在#container上。

來源

2011-12-12 18:39:51

這使得頁腳和圖像上升我需要圖像保持在它只是變大的位置 – aurel

如果您打算保持寬度靜態，您可以'footer，img {width：960px;位置：相對;右：-320px; left：0px;' –

取出img部分，並使用底部而不是頂部 – Zoidberg

如何擴大div的寬度以超出其父寬度？

回答

相關問題