浮动图像，自动换行文本，最小自动换行大小

Question

I have a 320px width image. The image is floated left and the text is wrapped around. Easy enough. Here is my 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>

The issue:

When the window is sized to 321-400-ish pixels, it looks weird. The little words kind of float right and stick to the top, but it just looks bad. What I want, is to define a minimum width for the text (to the right only), say 100 pixels. So 100px wide wraps down the right, then 420 pixels wide under the floated image.

So, if the screen is 320px, image on top, text below.

If the screen is 370px, image on top, text below.

If the screen is 420px+, image floated left, text wrapped around, to the right and under.

I hope that's clear enough. I've been trying various combinations of float and flexbox without the desired result.

I'm not looking for a complex javascript screen-resolution size-adjusting solution. I could write that up and change the code based on screen size... But that's not how I'd like to tackle this issue. I'm just looking for a simple CSS solution.

Thank you

😊

Edit:

Here's a fiddle .

Resize the window, so only the a and bb show on the right.

Answer 1

Use CSS for the screen resolution with media styles.

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

if the screen size is below 420 the css in the block will apply.

Answer 2

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

Use media query.

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

And your question isn't clear. You said you want image only <370px and image+text >470. What about the res inbetween them?

And 370 isn't going to give you desired result. 420px is the way to go.

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