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

【问题标题】：Moving text-area instead of resizing text移动文本区域而不是调整文本大小
【发布时间】：2013-11-22 14:06:59
【问题描述】：

我的情况：

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

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

而且由于我不知道标题和描述会有多长（因为它是一个配置文件），所以我无法使用媒体查询或宽度。

我试过了

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

【问题讨论】：

你能给我们看看你的html吗？
将文本粘贴到span 中并浮动。
如果标题外壳在一行中，您可以添加一些：white-space: nowrap css 样式，然后围绕标题和段落浮动一个跨度...如果我们能看到您的 html 和 css，帮助会更容易
@MelanciaUK 关键是，这些是 2 个单独的文本块，标题和描述。因此，如果我将文本放入一个 span 中并让它浮动，它会给我带来与 display:inline-block 相同的效果。这样，它们将彼此漂浮。这不是我想要的
当我说 the text 时，我指的是整个事情，包括标题。

标签： html css drupal-7

【解决方案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 */
}

【讨论】：