8

要素の幅を固定せずに、幅を設定するときに親 div 要素がテキストを無視するようにします。要素の幅が画像の幅だけに影響されるようにしたい。

<div>
    <img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/>
    <p>I want this text to wrap once this paragraph element reaches the width of the image.</p>
</div>

div {
    background: green;
    display: inline-block;
}

私のjsFiddle

どんなアドバイスでも大歓迎です

4

3 に答える 3

7

div の表示プロパティをtable-caption
(firefox と chrome でテスト済み) に変更します。

更新されたjsfiddle

于 2013-07-30T19:12:36.867 に答える
2

これが私が見つけた最高のものです：

http://jsfiddle.net/y8Qnd/3/

私が行ったことは、pタグをフローから外しposition: absoluteて、含まれている div の幅が画像だけになるようにすることです。次に、pタグがその親であるコンテナの幅を継承するようにします。pこれはタグの幅を固定せず、完全にクロス ブラウザーです。

于 2013-07-30T19:13:27.360 に答える
0

これは、画像で親の幅を決定する必要があるため、DOM ツリーを上に移動する必要があることを意味します。残念ながら、DOM ツリーを上に移動することはできません (まだ)。

別の方法として、テキストを absoluteに配置して、ドキュメント フローから持ち上げて、親 div の幅に影響を与えないようにすることもできます。ただし、これは高さが影響を受けないことも意味しますが、これはおそらくあなたが求めているものではありません. 親の背景を繰り返すことで正しい高さを模倣できますが、その下のコンテンツは押し下げられないため、それも実際にはオプションではないと思います. とにかく例を設定します：http://jsfiddle.net/y8Qnd/2/

私が考えることができる唯一のオプションはjavascriptです。画像の幅を取得し、親コンテナーに適用します。jQuery では (このような些細なことに jQuery を使用すると、おそらくバッシングされるでしょうが、「古い学校の JavaScript」を書くことに慣れていないだけです...)、次のようになります。

var $wrapper = $('div');  // you will probabaly want to use some id or class here
var width = $wrapper.find('img').width();
$wrapper.css('width', width);

例: http://jsfiddle.net/y8Qnd/6/

于 2013-07-30T19:13:11.617 に答える