8

キャプションを画像にオーバーレイしようとしています。私はこれを行うことができましたが、画像は親の外に拡大していdivます。

私はそれを「自動サイズ」にしたいので、 にdiv設定しました。現在の出力を見ると、画像が黒い枠のボックス内にある可能性があることがわかります。inline-blockwidth: 100%

クロスブラウザーの問題が発生した場合は、Chrome でのみ動作する必要があります。

前もって感謝します！

ライブデモ

CSS:

#body_content {
    border: solid 1px blue;
    display: inline-block;    
    padding: 5px;
}
#body_header {
    border: solid 1px red;
    font-size: 25px;
    padding: 5px;
}
#body_image {
    position: absolute;
}
#body_image_caption {
    color: white;
    line-height: 30px;
    margin-left: 10px;
}
#body_image_container {
    background: white;
    border: solid 1px black;
    margin-top: 3px;
    padding: 10px;
}
#body_image_overlay {
    background-color: black;
    bottom: 5px;
    display: block;
    height: 30px;
    opacity: 0.85;
    position: absolute;
    width: 100%;    
}​

HTML:

<div id="body_content">
   <div id="body_header">
      Heading
   </div>
   <div id="body_image_container">
      <div id="body_image">
          <img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" />
          <div id="body_image_overlay">
             <div id="body_image_caption">
                Some Text
             </div>
          </div>
      </div>
   </div>
</div>
4

3 に答える 3

20

に設定されているため、要素#body_imageは からエスケープされています。絶対配置された要素はドキュメントのフローから削除され、子要素が存在しないかのように親要素が折りたたまれます。に変更すると、ブラック ボックス内に含まれるようになります。#body_image_containerpositionabsoluterelative

#body_image{
    position: relative;
}

http://jsfiddle.net/AaXTm/2/

于 2012-12-23T16:57:28.153 に答える
8

親divでこのcssを試してください。

Overflow:auto
于 2013-10-08T19:16:47.450 に答える
2

このフィドルを確認してください。画像の子要素の位置を絶対位置に設定し、親要素を相対位置に設定する必要があります。それに応じてキャプションの幅を変更します。

child-element {
    position:absolute;
}

parent-element {
    position:relative
}

http://jsfiddle.net/AaXTm/4/

于 2012-12-23T18:52:56.310 に答える