親要素の幅がわからないときに折り返しを有効にする方法

Question

div内に配置された画像とその画像の説明があります。説明が十分な長さである場合

<div> 
    <img src="pic.jpg"> 
    <span>Lorem ipsum dorus blablabla foo bar woo yay hoopla doo</span> 
</div> 

は、それが画像よりも広くなるようにdiv要素を伸ばします。この場合、どうすれば説明を折り返すことができますか？ divの正確な幅を指定すると動作しますが、残念ながら画像のサイズが変わってしまい、あらかじめ幅を知ることができません。

Answer 1

<table>> 
    <caption align=bottom>Lorem ipsum dorus blablabla 
    foo bar woo yay hoopla doo</caption> 
    <tr><td><img src="pic.jpg"> 
</table> 

キャプションテキストhttp://jsfiddle.net/3Qucb/1/は水平に、デフォルトではセンタリングされますが、CSSを使って左整列させることができます。他の方法やこれがなぜうまくいくか説明するには、http://www.cs.tut.fi/~jkorpela/www/captions.html

Answer 2

$(document).ready(function() { 

if(your_condition) 
{ 
    // Enable word-wrapping 
    $("span").wordWrap('on'); 
}else 
{ 
    // Disable word-wrapping 
    $("span").wordWrap('off'); 
} 
}); 

<div> 
    <img src="pic.jpg"> 
    <span>Lorem ipsum dorus blablabla foo bar woo yay hoopla doo</span> 
</div> 

Answer 3

スパンが絶対配置されるのは問題ですか？ http://jsfiddle.net/d2GQa/

マークアップ：

<div> 
    <img src="picture.gif" alt="picture"/> 
    <hr /> 
    <span class="cl-left">Text text text text text text text text text...</span> 
</div> 

CSS：私は短期間で javascriptをせずに解決を見つけられませんでした

div { 
    background: red; 
    float: left; 
    position: relative; 
} 

span { 
    display: inline-block; 
    position: absolute; 
    width: 100%; 
} 

hr { 
    clear: both; 
    border: none; 
    visibility: hidden; 
    margin: 0; 
    padding: 0; 
} 

Answer 4

。フロートについて不思議に思っているならば、それは全ての収縮に対してです。