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

Question

我有一个嵌套在另一个元素（即父元素）中的元素。问题是，我想让子元素比父元素更宽 - 因为我无法找到我需要将它移动到当前父元素之外的PHP代码。

这是页面的外观（点击图片放大）：

---

THE PLOT：您在页面中看到两个内容块 - <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，但我需要子元素的宽度为980px。

所以我正在做的是：

• 将子元素的宽度设置为980px。 （width:980px;）
• 现在，子元素溢出父元素，同时也溢出右浮动块。 （即<div id="Panel">...</div>）
• 所以，我给了右浮动块一些margin-top，以便它隐藏在扩展元素下面。

以下图片仅代表（点击图片放大）：

所以我的问题是 - 是我正在做的事情还是做坏事？这个跨浏览器兼容吗？ （即，它在所有浏览器中看起来是否相同？）

希望有人能澄清一下。感谢。

Answer 1

只需将标题移到<div class="Content">之外。

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

不要仅仅为此使用JavaScript，这将是一个错误。

我也不得不提到我不认为标题应全宽，它并不代表侧板的标题，它不是对于线程（仅在左列中）。

Answer 2

我不会。作为一般的经验法则，我让父母比孩子更大。请参阅this和this。如果你使用HTML和CSS实现这一点，我相信你会看到浏览器与浏览器之间的差异。

您是否考虑过使用JavaScript来完成您想要做的事情？