CSS：明示的な幅と単語ラップのないネストされた要素

Question

画像の幅を明示的に知ることなく、画像の下にキャプションを配置しようとしています。キャプションを完全な画像幅に拡張しますが、親要素のwitdhを伸ばして、代わりにラインを包みません。

JavaScript（要素に幅の読み取りと適用）の使用を避けたり、幅の範囲が大きいため、最大幅：123pxを使用したりしないようにしたいと思います。

現在、コードはこのように見えますが、自由に変更できます。画像幅は不明ですが、最大寸法に制限されています。

<div style="float:right; width:auto;">  
  <img src="http://" \>
  <div style="clear:right; min-width:100px; max-width:200px; word-wrap:break-word;">
    My caption which can be longer then the image above and should wrap, I do not want to use max-width.
  </div>
</div>

どんな提案でも大歓迎です。

Answer 1

まず、HTMLからスタイルを取り出します。それらはCSSに属します。

それから、私はあなたができることは、Divの位置を「相対的」に設定することだと思いますが、その幅を自動に任せ、そのオーバーフローは「隠された」に残します。隠された設定は、すべての子供の要素に対して十分な大きさを強制する必要があります。

キャプション、次に、Auto、およびbottom：0、left：0、width：100％に配置するように設定します。

それはあなたが探しているものを達成するはずです。

Answer 2

キャプションdivの幅を親のある割合に設定できます。

つまり、親が（x）px幅である場合（内部の画像がその幅を引き起こすため）、キャプションボックス幅はある％（幅：100％;おそらく）に設定できます。