テキストは、応答性の設計で画像の下に折り返されません

Question

[検索が、これが重複している場合は、他にポイントしてください...答えを見つけることができませんでした]

私は、問題のビットを持っています画像の下のテキストを折り返す際に私はブートストラップテンプレートを使用しています。私は以下に示すCSSを作成しましたが、次の行に折り返すためにピクチャより長いテキスト行を取得することはできません。

.picture {background-color: #F9F9F9;border: 1px solid #CCCCCC;padding: 3px;font: 11px/1.4em Arial, sans-serif;} 
.picture img {border: 1px solid #CCCCCC;vertical-align:middle;margin-bottom: 3px;} 
.rightPicture {margin: 0.5em 0pt 0.5em 0.8em;float:right; text-align:right;} 
.img-responsive,.thumbnail > img,.thumbnail a > img,.carousel-inner > .item > img,.carousel-inner > .item > a > img {display: block;max-width: 100%;height: auto; /* This is from a Bootstrap template */ 

問題のテキスト/画像...

<div class="picture rightPicture"><img src="/img/netanyahu-obama-whiteHousegov.jpg" width="400" height="266" class="img-responsive" alt="Netanyahu and Obama at the White House"> Israeli Prime Minister Benjamin Netanyahu and US President Barack Obama meet in the Oval Office. [<cite>Source: White House</cite>]</div> 

私は以下のコードを使用しますが、私はの幅を設定しているとして、それは応答の使用のためにサイズを変更しない場合div：

<div class="picture rightPicture" style="width:402px;"> <img src="/img/netanyahu-obama-whiteHousegov.jpg" width="400" height="266" class="img-responsive" alt="Netanyahu and Obama at the White House"> <br>Israeli Prime Minister Benjamin Netanyahu and US President Barack Obama meet in the Oval Office. [<cite>Source: White House</cite>] </div> 

これを修正する方法はありますか？

Answer 1

使用max-widthそれはそれをやった< 402px

<div class="picture rightPicture" style="max-width:402px;"> <img src="/img/netanyahu-obama-whiteHousegov.jpg" width="400" height="266" class="img-responsive" alt="Netanyahu and Obama at the White House"> <br>Israeli Prime Minister Benjamin Netanyahu and US President Barack Obama meet in the Oval Office. [<cite>Source: White House</cite>] </div>