如何扩展div的宽度以超出其父宽度？

Question

这是代码的片段

<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添加到容器中，它们也会显示在顶部。

通常我会关闭文章标签，添加图片，然后从文章开始。这不是一个理想的解决方案。

Answer 1

首先，他们需要block或inline-block来接受宽度。浮子可能会造成奇怪的包裹。您可以尝试overflow: visible查看是否有帮助。

Answer 2

你在正确的轨道上有定位。您希望将容器设置为relative，然后将内部元素设置为absolute，固定在右上角：

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

绝对定位元素相对于其第一个定位的祖先，因此内部元素基于#container定位。