2

これが私のコードです：

<div class="image">
<img src="image.jpg" alt="Image description" />
<p class="caption">This is the image caption</p>
</div>

これが私のCSSです：

.image {
position: relative;
float: right;
margin: 8px 0 10px 10px;
}

.caption {
font-weight: bold;
color: #444666;
}

上記のように、キャプションは div.image の幅に準拠します。私の問題は、多くの場合、imgのサイズが 100px 幅から 250px 幅まで変化することです。サイズに関係なく、キャプションの幅を対応する画像の幅に合わせたいと思います。

これもよりセマンティックにしたいのですが、p.captionをimgに切り替えるのがどれほど簡単かはわかりません。もちろん、私はその方法を好みますが、これを一度に一歩ずつ進めています。

画像の幅を検出し、その幅をインライン スタイルとしてキャプション タグに追加するために使用できる jquery コードはありますか?

これを行うより良い方法はありますか？私は提案を受け入れます。

4

1 に答える 1

0

次のようなことができます。

$(window).load(function() {
  $(".image p.caption").each(function() {
    $(this).width($(this).siblings("img").width()).prependTo($(this).parent());
  });
});

これは、あなたが求めた の<p>前の移動も行います。<img>

テスト用に、動作するデモをここで見ることができます。

于 2010-05-15T07:15:30.410 に答える