使嵌套元素比父元素更寬是否可以？

我有一個嵌套在另一個元素（即父元素）內的元素。問題是，我想讓子元素比父元素更寬 - 因爲我無法找到將代碼移到其當前父元素外部的PHP代碼。使嵌套元素比父元素更寬是否可以？

這是怎樣的網頁外觀（點擊圖片看大圖）：

情節：您所看到的頁面兩個內容塊 - <div id="Content">...</div>是一個塊浮動左而<div id="Panel">...</div>是另一種浮動的權利。

看到文本的藍色塊？這是我的論壇中討論主題的標題，在代碼中由<div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div>表示。如箭頭所示，我想用css width:980px;將它擴展到頁面的整個寬度。

事情是，<div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div>是一個子元素，其父元素是<div id="Content">...</div>。父元素的寬度爲700px，但我需要子元素的寬度爲980像素。

所以我在做什麼是這樣的：

下面的圖像表示只是（點擊圖片放大）：

所以我的問題是 -是我在做什麼好還是不好的事是什麼？這是跨瀏覽器兼容嗎？（即它在所有瀏覽器中看起來是否相同？）

希望有人能對此澄清。謝謝。

2012-03-11 its_me

我不會。作爲一般的經驗法則，我讓父母比孩子更大。見this和this。如果您使用HTML和CSS實現此功能，我相信您會發現瀏覽器與瀏覽器之間的差異。

你有沒有想過使用JavaScript來完成你想要做的事情？

2012-03-11 08:10:20

不，我沒有考慮過使用JS，因爲[1]我認爲使用JS進行樣式設計不是一個好主意[2]我不知道JS - 我所知道的只是HTML和＆ CSS。 :) – 2012-03-11 08:18:06

好的。如果你對你有什麼感到滿意，那我就批准。我會使用[Adobe BrowserLab]（https://browserlab.adobe.com/en-us/index.html）來檢查跨瀏覽器兼容性。 – 2012-03-11 08:23:22

只需移動<div class="Content">以外的標題即可。

<div class="Tabs HeadingTabs DiscussionTabs FirstPage"> 
</div> 
<div class="Content"> 
    ... 
</div>

不要僅僅爲此使用JavaScript，那將是一個錯誤。

我也覺得不得不提到，我不認爲標題應爲無論如何，它不代表側面板的標題，它是針對線程（它只在左欄中）。

2014-10-16 02:58:20

回答