CSS div画像に合わせて伸ばす

Question

2つのdivを作成するために、次のコードを使用します。大きな灰色のものと右側に画像があるものがあります。コードはうまくいきますが、両方のdivは画像の終わりには及ばない...どうすればこの問題を解決できますか？

<style> 
div.div1 { 
background-color: #F1F1F1; 
border: 1px solid #CCCCCC; 
padding: 10px; 
} 
div.div2 { 
background-color: #e2d8ba; 
border: 1px solid #000000; 
padding: 10px; 
text-align: justify; 
} 
</style> 
<div class="div1"> 
<div class="div2"> 
<img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> 
Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div> 
</div> 

Answer 1

画像の両方のDIVにoverflow: auto;を追加、FLOATED要素であるので：

div.div1 { 
 
    background-color: #F1F1F1; 
 
    border: 1px solid #CCCCCC; 
 
    padding: 10px; 
 
    overflow: auto; 
 
} 
 

 
div.div2 { 
 
    background-color: #e2d8ba; 
 
    border: 1px solid #000000; 
 
    padding: 10px; 
 
    text-align: justify; 
 
    overflow: auto; 
 
}

<div class="div1"> 
 
    <div class="div2"> 
 
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div> 
 
</div>

Answer 2

ときfloat要素は、remove it from the normal flow of the document。フロートされた要素の高さに合わせて親を拡張したい場合は、フロートをクリアするために "clearfix"を実装する必要があります。浮動小数点数については、ここをクリックしてください。https://css-tricks.com/all-about-floats/

浮動小数点数をクリアする手法はたくさんあるので、フロートされた子を持つすべての親に使用できる.clearfixクラスを追加しました。多くのオプションの中で

<style> 
 
    .clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    } 
 
    div.div1 { 
 
    background-color: #F1F1F1; 
 
    border: 1px solid #CCCCCC; 
 
    padding: 10px; 
 
    } 
 
    div.div2 { 
 
    background-color: #e2d8ba; 
 
    border: 1px solid #000000; 
 
    padding: 10px; 
 
    text-align: justify; 
 
    } 
 
</style> 
 
<div class="div1"> 
 
    <div class="div2 clearfix"> 
 
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div> 
 
</div>

Answer 3

/*CSS*/ 
div.div2 { 
    overflow: auto; 
} 

/*OR*/ 
div.div2 { 
    display: inline-block; 
    width: 100%; 
} 

Answer 4

、一つはプロパティdisplay: tableを使用することです。

のdiv画像がtable表示指定された親要素と

を終了する場合、それはテーブルととしてレンダリングされるまで延びない：質問について

子供を基準にしてスケール。

以下のサンプルスニペット：

div { 
 
    padding: 10px; 
 
    display: table; 
 
} 
 

 
div.div1 { 
 
    background-color: #F1F1F1; 
 
    border: 1px solid #CCCCCC; 
 
} 
 

 
div.div2 { 
 
    background-color: #e2d8ba; 
 
    border: 1px solid #000000; 
 
    text-align: justify; 
 
} 
 

 
div.div2>img { 
 
    float: right; 
 
    padding-left: 10px; 
 
}

<div class="div1"> 
 
    <div class="div2"> 
 
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818"> Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div> 
 
</div>