html - フレームの CSS 配置の問題

Question

divbackground-color:#000全体に設定したい。.content画像のフレームを作成しましたが、画像を完全にラップします ( http://jsfiddle.net/Yuaq8/ )が、フレームの位置が に設定されている場合のみですabsolute。この場合.content、正しく入力されません。

この fiddle.pic-frameに属する position プロパティを削除すると、div が塗りつぶされますが、フレームが奇妙に見えます。フレームを最初のフィドルのように見せて、.content div全体を埋めるにはどうすればよいですか?.content

Answer 1

position:absoluteフローから要素を削除します。position:relativeまたは のdisplay:inline-block代わりに使用し.pic-frameます。

.pic-frame {
   display:inline-block;
   padding:12px;background-color: #DDD;
}

デモ

Answer 2

または、pic.frame divでwidthを200pxに設定し、＃picdivからwidthとmarginプロパティを削除することもできます。

.pic-frame {
    width: 200px;
    padding:12px;background-color: #DDD;
}
#pic {
   height:200px;
   background-color: #999;
}

Answer 3

.pic-frame の幅を設定してみてください。 JSフィドル