css - 如何扩展 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 才能接受宽度。 float 可能会导致奇怪的包装。您可以尝试 overflow: visible 看看是否有帮助。