divを最大幅のコンテンツの幅に設定します

Question

私は浮動小数点の左イメージとテキストを含むdivを持っています。それは以下を行います。

.outer-div { 
 
    max-width: 95%; 
 
    background-color: yellow; 
 
    display: inline-block; 
 
} 
 
.image { 
 
    float: left; 
 
}

<div class="outer-div"> 
 
    <img class="image" src="http://www.w3schools.com/images/colorpicker.png"> 
 
    <div class="test">Here is some text that I want the outer div to size to without line-breaking.</div> 
 
</div>

それが単独でテキストに基づいて、外側のdivのサイズを作成し、テキストをラップさせ、浮遊画像を挿入する方法に注意してください。私は外側のdivの幅を浮動画像の幅+テキストの幅にしてから、95％の最大幅に達したときにのみ改行します。

編集：最初の行がページの端に達すると、すべてのテキストが画像の下に移動しないようにします。しかし、テキストがたくさんある場合は、イメージの下に折り返してください。

Answer 1

テストで「インラインブロック」を使用すると、他のブロックの横に並ぶように設定する必要があります。あなたのCSSセクションに以下を追加してください。あなたはそれが下部ではなく、上部中央に配置したい場合

.test { 
display: inline-block; 
} 

その後、あなたは次のように追加することができます。

vertical-align: top; 

をうまくいけば、これはあなたを助け！運が良かった！あなたはそれを達成するためにフレキシボックスを使用することができます

Answer 2

、以下の例を参照してください。

jsFiddle

.outer-div { 
 
    display: inline-flex; 
 
    align-items: flex-start; 
 
    max-width: 95%; 
 
    background-color: yellow; 
 
}

<div class="outer-div"> 
 
    <img class="image" src="http://www.w3schools.com/images/colorpicker.png"> 
 
    <div class="test">Here is some text that I want the outer div to size to without line-breaking.</div> 
 
</div>

Answer 3

を私の友人はいじりと答えを見つけました。答えはの内部にのテキストとテストdivを浮かべることです。 CSSに変更を加える必要はありません。以下

例：ここ

.outer-div { 
 
    max-width: 95%; 
 
    background-color: yellow; 
 
    display: inline-block; 
 
} 
 
.image { 
 
    float: left; 
 
}

<div class="outer-div"> 
 
    <div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking.</div> 
 
</div>

は、画像の下にラップしていることを確認するテキストの多くの例です。答えを提供するすべての人に

.outer-div { 
 
    max-width: 95%; 
 
    background-color: yellow; 
 
    display: inline-block; 
 
} 
 
.image { 
 
    float: left; 
 
}

<div class="outer-div"> 
 
    <div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.</div> 
 
</div>

感謝。あなたの答えは間違いなく将来のものに役立ちます。 :)