2

次のようなキャプション付きの画像があります。

<figure class="imageBoxShadow">
    <img alt="Alt-Text" src="http://lorempixel.com/280/375">
    <figcaption>A Caption for this image</figcaption>
</figure>

クラス「imageBoxShadow」は、画像の周りに boxShadow (誰が推測したでしょうか?) を配置します。キャプションは境界線の内側に入るはずなので、図に付けました。キャプションが画像の幅よりも小さい限り、これはうまく機能します。

ただし、小さな画像や長いキャプションがある場合、キャプションは図要素を可能な限り拡張しますが、これはばかげているように見えます。

もちろん、ハードコードされたスタイルを追加して幅を設定することで、図の要素を制限することもできます。

<figure class="imageBoxShadow" style="width: 100px">
    <img alt="Alt-Text" src="http://lorempixel.com/100/150">
    <figcaption>Using a hardcoded style to restrict the figure element works but feels stupid.</figcaption>
</figure>

しかし、それは愚かで、CMS のコンテキストではあまり便利ではありません。

これを行うより良い方法はありますか？

それをチェックするための jsFiddle リンクを用意してください: http://jsfiddle.net/Sorcy/h5sNB/

4

2 に答える 2

2

追加

figure {
  display: table;
  width: 1px;
}

あなたのCSSに[ここで提案されているように]これで完了です。

于 2012-11-12T11:43:28.143 に答える
0

世界を複雑にするな！単純に、キャプションがマウスオーバーで表示されるようにします。さらに、キャプションのごく一部をデフォルトで表示することができます。その後、マウスオーバーまたはホバーすると、残りの部分がツールチップとして表示されます。

于 2012-11-12T11:33:25.967 に答える