html - 使嵌套元素比其父元素更宽可以吗？

Question

我有一个元素嵌套在另一个元素(即父元素)中。问题是，我想让子元素比父元素宽 — 因为我找不到将它移出当前父元素所需的 PHP 代码。

这是页面的样子(点击图片放大):

---

情节:您在页面中看到两个内容 block — <div id="Content">...</div>是一个向左浮动的方 block ，<div id="Panel">...</div>是另一个向右浮动的。

看到蓝色的文本 block 了吗？这是我论坛中讨论主题的标题，由 <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; )
• 现在子元素溢出父元素并位于右侧 float block 的顶部。 (即 <div id="Panel">...</div> )
• 因此，我给右侧 float block 设置了一些 margin-top，这样它就不会隐藏在扩展元素下方。

下图代表了这一点(点击图片放大):

所以我的问题是 — 我做的事情好还是不好？这个跨浏览器兼容吗？ (即，它在所有浏览器中看起来都一样吗？)

希望有人能解释一下。谢谢。

Answer 1

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

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

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

我也不得不提到，我不认为标题应该是全宽的，它不代表侧面板的标题，它是线程(仅在左栏)。