ラッパーは子画像の最大幅を取るようにしますか？

Question

私は質問に正しく言えるかどうか分かりませんが、私が達成しようとしていることは、例を見て簡単です。

http://codepen.io/anon/pen/xOOvJB

しかし、固定幅のdiv wqrappingを与えることなく：私は基本的には次のようになりたい

http://codepen.io/anon/pen/XKKvBx

：

ピーズは、このを見てみましょう。だから、基本的には、ラッパーが画像の幅を取り、太字のテキストは使用しないようにしたいと思います。これを行う方法はありますか？

また、絶対位置指定を使用することはできません。イメージとデータベースから送信されるテキストは、毎回異なるためです。最初のリンクから

コード：2番目のリンクから

<div class="wrapper"> 
    <img src="https://placekitten.com/300/300"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
</div> 

.wrapper { 
    border: 1px solid red; 
    display: inline-block; 
} 

コード：

<div class="wrapper"> 
    <img src="https://placekitten.com/300/300"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
</div> 

.wrapper { 
    width: 300px; 
    border: 1px solid red; 
} 

Answer 1

あなたはIMGは、その幅を破ると幅ラッパーとして彼自身のサイズを設定しますtableと1%幅であることを、それを強制する場合は、1つ「ハック」の方法は、あなたのラッパーのための別の表示プロパティを使用して、あります：

.wrapper { 
 
    border: 1px solid red; 
 
    display: table; 
 
    width: 1%; 
 
}

<div class="wrapper"> 
 
    <img src="http://www.placebacon.net/400/300"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. 
 
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque 
 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
 
</div>

Answer 2

EDIT：あなたがwrapperdisplay: table-captionとして

.wrapper { 
 
    border: 1px solid red; 
 
    display: table-caption 
 
}

<div class="wrapper"> 
 
    <img src="https://placekitten.com/300/300"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. 
 
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque 
 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
 
</div> 
 

 
<hr /> 
 

 
<div class="wrapper"> 
 
    <img src="https://placekitten.com/500/500"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. 
 
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque 
 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
 
</div>

を設定することができます

Answer 3

幅と、まだ表示を追加する必要はありません：テーブルキャプションが両方クロームで正常に動作し、Firefoxは

.wrapper { 
    border: 1px solid red; 
    display: table-caption; 
} 

、これを試してみてください