在响应式设计中，文本不会在图像下包裹

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代替，然后div将与视口一起缩放，如果它＆lt; {1}} 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>