divの幅を親の幅を超えて拡大するにはどうすればよいですか？

これは、コードdivの幅を親の幅を超えて拡大するにはどうすればよいですか？

<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を追加しても、それらは先頭に移動します。

通常、記事タグを閉じて画像を追加し、次に記事から始めます。これは理想的な解決策ではありません。

出典

2011-12-12 aurel

まず、この質問に記載されている実際のコードにエラーがないことを確認します。ポーション：絶対は何もしません。次に、Strictのdocタイプを使用していることを確認します。第三に、問題を少し明確にし、問題を解決しようとしたことを教えてください。 – Zoidberg

"contents"の幅を制限しようとしている場合、 'article'の代わりに' p'要素の幅を設定してみませんか？そして、あなたは 'article'の境界の外側に行くことを心配する必要はありません。 'img'を浮動させると、'＃container'の右の境界までずっと押し込まれます。 – justis

質問で私の誤りが本当に申し訳ありません。私は投稿する前に3回それを読んだ - 申し訳ありません – aurel

最初に、幅を受け入れるには、blockまたはinline-blockにする必要があります。浮動小物は奇妙なラッピングを引き起こす可能性があります。それが役に立ちそうなら、overflow: visibleを試すことができます。

出典

2011-12-12 18:30:46

ありがとう、これは素晴らしい作品 – aurel

-1

あなたはポジショニングを正しく実行しています。あなたは右上隅に固定、相対的にコンテナを設定し、絶対に設定し、内側の要素にしたい：

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

絶対位置付け要素がその最初の位置付け祖先を基準とし、その内部要素のベースに位置しています#containerで

出典

2011-12-12 18:39:51

これはフッタと画像を上に移動私はそれがちょうどあなたが行うことができる静的な幅を維持することを計画している場合は、より大きくなる場所にとどまるために画像が必要 – aurel

'footer、img {width：960px;ポジション：相対;右：-320px;左：0px; ' –

imgの部分を取り出して、フッタの代わりにbottomを使用します。 – Zoidberg

divの幅を親の幅を超えて拡大するにはどうすればよいですか？

答えて

関連する問題