移动文本区域而不是调整文本大小

Question

我的情况：

我有一个图像和一些文字，但是当我调整窗口大小时（如在移动视图中） 我不希望文本像往常一样调整大小， 我不想要的东西：

我希望浏览器/设备在图像下方移动块时需要。 我想要的是什么：

由于我不知道标题和描述会有多长（因为它是个人资料），我无法使用媒体查询或宽度。

我试过

那么，最有效的方法是什么呢？

Answer 1

如果您不想依赖JS，则需要设置一些“粗略”CSS值来​​尝试此行为，请注意我在这种情况下使用div复制img

也就是说，由于依赖于计算的近似％值，它远非完美。一些JS肯定会有助于提高准确性。

See this fiddle

HTML

<div class='wrapper'>
    <img/>
    <div class='content'>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

CSS

img{
    height:200px;
    width:200px;
    border:1px solid grey;
}
img, .content{
    float:left;
    display:inline-block;
}
.content{
    max-width:60%; /* Width should accommodate img */
    min-width:200px; /* minimum width before breaking to new line */
}