状況としては、img があり、その幅と同じ幅のポップオーバー キャプション ボックスが必要です。img タグは子要素を受け入れないため、キャプションを img の子として追加することはできません。そのため、次のようなものを考えました。
<div>
<img/>
<div>
...caption...
<div>
</div>
問題は、外側の div がブロック要素と同様に親の幅に合わせて拡張され、そのため caption-div も同じように幅が広くなり、次のようになることです。
外側の div がページの幅になる場合、キャプションは外側の div の幅に従うため、画像からはみ出します。
このサブテンプレートをサイト全体のあらゆる形状とサイズの画像に使用しているため、外側の div の幅を手動で設定したくありません。外側の div を親の画像を埋めるのではなく、画像に沿わせる方法はありますか?
ベストアンサー1
このサブテンプレートをサイト全体のあらゆる形状とサイズの画像に使用しているため、外側の div の幅を手動で設定したくありません。外側の div を親の画像を埋めるのではなく、画像に沿わせる方法はありますか?
display: inline-blockと組み合わせる必要がありますtext-align: center。
見る： http://jsfiddle.net/thirtydot/V3XyK/
HTML:
<div class="imageContainer">
<div>
<img src=".." />
<span>...caption...</span>
</div>
</div>
CS: ...
.imageContainer {
text-align: center;
}
.imageContainer img {
display: block;
}
.imageContainer div {
position: relative;
display: inline-block;
/* if you need ie6/7 support */
*display: inline;
zoom: 1;
}
.imageContainer span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #000;
background: rgba(0,0,0,.5);
}