文本將不會在響應式設計下的圖像包裹

Question

[搜查，但未能找到答案......如果這是一個重複的，請指向其他]

我有一個有點問題獲取圖像下方的文本以包裝。我正在使用Bootstrap模板。我創建瞭如下所示的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>