在响应式设计中，文本不会在图像下换行答案

【问题标题】：Text won't wrap under image in responsive design在响应式设计中，文本不会在图像下换行
【发布时间】：2018-01-14 04:00:45
【问题描述】：

[已搜索但找不到答案...如果这是重复的，请指向另一个]

我在让图像下方的文本换行时遇到了一点问题。我正在使用引导模板。我已经创建了如下所示的 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>

任何想法如何纠正这个问题？

【问题讨论】：

标签： css image twitter-bootstrap-3 responsive-design

【解决方案1】：

改为使用max-width，如果是402px，则div将随视口缩放

<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>

【讨论】：

做到了！感谢您的帮助！
@Lee 真棒，你打赌 :)