浮动图像，换行，最小换行大小

Question

我有一个 320 像素宽度的图片。图像向左浮动，文本环绕。很容易。这是我的 HTML：

<div>
    <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" style="width:320px; float:left; margin:0 10px 4px 0;">
    a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg  
</div>

问题：

当窗口大小为 321-400 像素时，它看起来很奇怪。小字有点浮在上面，贴在上面，但看起来很糟糕。我想要的是定义文本的最小宽度（仅在右侧），例如 100 像素。所以 100px 宽会在右侧环绕，然后在浮动图像下方 420 像素宽。

所以，如果屏幕是 320 像素，则图像在上，文字在下。

如果屏幕为 370 像素，则图像在上，文字在下。

如果屏幕为 420 像素以上，图像向左浮动，文字环绕，向右和向下。

我希望这已经足够清楚了。我一直在尝试浮动和弹性框的各种组合，但没有达到预期的效果。

我不是在寻找复杂的 javascript 屏幕分辨率大小调整解决方案。我可以写下来并根据屏幕大小更改代码......但这不是我想要解决这个问题的方式。我只是在寻找一个简单的 CSS 解决方案。

谢谢

????

编辑：

这是fiddle。

调整窗口大小，右边只显示a和bb。

Answer 1

将 CSS 用于具有媒体样式的屏幕分辨率。

@media screen and (max-width: 420px) {
img {
   float:none !important;
}}

如果屏幕尺寸低于 420，块中的 css 将适用。

Answer 2

https://jsfiddle.net/manukarki/12syovj0/2/

使用媒体查询。

img{
  width:320px; 
  float:left; 
  margin:0 10px 4px 0;
}
@media only screen and (max-width:370px){
  img{
    float: none;
  }
}

你的问题不清楚。你说你只想要图像 470。他们之间的资源呢？

而且 370 不会给你想要的结果。 420px 是要走的路。

@media only screen and (max-width: 420px){