Text Wrap-around-Bild, zu einer Spalte

Question

Ich habe ein Bild, ich möchte Text umwickeln, aber bei etwa 793px möchte ich es nur auf eine Spalte, Bild oben, Text unten. Ich habe versucht, eine Media-Abfrage mit Float: keine, aber aus irgendeinem Grund hat das nicht funktioniert. Danke im Voraus!

/*float left*/ .left { float: left; /*left in our text*/ margin: 3px; /*space around the image*/ 
 
} 
 

 
@media (max-width: 793px;) { 
 
\t img { 
 
\t \t 
 
     float:none; 
 

 
\t } 
 

 
}

<p> <img src="https://36.media.tumblr.com/e09631b272ecaf21862513edd536eeed/tumblr_n7a2ldALJt1so5delo1_500.jpg" alt="temp" class="left" /> Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 

 
\t \t \t Maecenas tempor finibus hendrerit. Aenean rutrum rhoncus ultricies. Vivamus egestas sollicitudin ex pulvinar finibus. Suspendisse a mi ac augue dictum blandit. Donec malesuada convallis placerat. Integer et hendrerit tellus. Donec eu justo mattis, consectetur orci ac, posuere diam. Integer nec accumsan turpis. Ut quis dolor eu ante pulvinar iaculis cursus at quam. 
 

 
\t \t \t Donec laoreet facilisis sapien euismod finibus. Nam malesuada dapibus ex, sed rutrum tortor consequat in. Aenean quis elit dapibus, vestibulum massa nec, porta odio. Nam accumsan est sed velit scelerisque commodo. Morbi id massa quis lorem tristique convallis at vel leo. Aenean pharetra aliquam porta. Sed ac tellus rutrum, egestas leo sed, sagittis velit. Vestibulum et tellus arcu. 
 

 
\t \t \t Suspendisse imperdiet purus felis, at pharetra magna molestie at. Aenean non nibh sed ex laoreet tempor vel vel dui. Fusce ut arcu eget mi pulvinar molestie a ut metus. Etiam ex ante, volutpat ac leo convallis, venenatis sollicitudin lorem. Mauris tempor mollis euismod. Phasellus viverra dolor egestas turpis pulvinar, ac sollicitudin arcu facilisis. Sed viverra quam lectus, in fermentum libero vestibulum ac. Duis fringilla tempus dui, lobortis fringilla lacus volutpat quis. Nam iaculis nisl vitae mauris scelerisque, eget vulputate purus aliquet. Nullam dictum nunc a enim tempus, et fermentum lectus tristique. 
 

 
\t \t \t Nulla quis mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit nec ipsum accumsan cursus. Nunc vitae lorem a tellus aliquam luctus eu eget turpis. Vivamus dapibus elementum imperdiet. Nullam facilisis mauris ac tellus fringilla volutpat. Sed elementum ligula dolor, vitae tincidunt ligula ultrices in. 
 
\t \t \t </p>

Answer 1

Der Grund, warum Sie Probleme sind ist, dass Bilder inline standardmäßig sind, so müssen wir display: block auf das Bild in den Medien Abfrage hinzuzufügen. Auch bei Ihrer Medienanfrage fehlen einige Komponenten.

CSS:

img{ 
    float: left; 
} 

@media screen and (max-width: 793px){ 
    img{ 
    display: block; 
    float: none; 
    margin: 0 auto 15px; 
    } 
} 

, die den Trick tun sollten. Hier ist ein fiddle.

UPDATE Zentriert das Bild mit einigen ebenfalls aktualisiert Geige und Code-Marge.

Answer 2

Ich denke, die andere Antwort funktioniert perfekt. Ich habe mich tatsächlich mit Ihrem Fehler herumgeschlagen, als mir klar wurde, dass eines der Probleme darin bestand, dass Ihre Medienabfrage nicht korrekt formatiert wurde. Das Semikolon machte alles kaputt. Wie auch immer, fröhliche Codierung!

img { 
 
    float: left; 
 
    margin: 3px; 
 
} 
 

 
@media (max-width: 793px) { 
 
\t p { 
 
     float: left; 
 
\t } 
 

 
}

<img src="https://36.media.tumblr.com/e09631b272ecaf21862513edd536eeed/tumblr_n7a2ldALJt1so5delo1_500.jpg" alt="temp"/> 
 

 
<p>Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
Maecenas tempor finibus hendrerit. Aenean rutrum rhoncus ultricies. Vivamus egestas sollicitudin ex pulvinar finibus. Suspendisse a mi ac augue dictum blandit. Donec malesuada convallis placerat. Integer et hendrerit tellus. Donec eu justo mattis, consectetur orci ac, posuere diam. Integer nec accumsan turpis. Ut quis dolor eu ante pulvinar iaculis cursus at quam. 
 
Donec laoreet facilisis sapien euismod finibus. Nam malesuada dapibus ex, sed rutrum tortor consequat in. Aenean quis elit dapibus, vestibulum massa nec, porta odio. Nam accumsan est sed velit scelerisque commodo. Morbi id massa quis lorem tristique convallis at vel leo. Aenean pharetra aliquam porta. Sed ac tellus rutrum, egestas leo sed, sagittis velit. Vestibulum et tellus arcu. 
 
Suspendisse imperdiet purus felis, at pharetra magna molestie at. Aenean non nibh sed ex laoreet tempor vel vel dui. Fusce ut arcu eget mi pulvinar molestie a ut metus. Etiam ex ante, volutpat ac leo convallis, venenatis sollicitudin lorem. Mauris tempor mollis euismod. Phasellus viverra dolor egestas turpis pulvinar, ac sollicitudin arcu facilisis. Sed viverra quam lectus, in fermentum libero vestibulum ac. Duis fringilla tempus dui, lobortis fringilla lacus volutpat quis. Nam iaculis nisl vitae mauris scelerisque, eget vulputate purus aliquet. Nullam dictum nunc a enim tempus, et fermentum lectus tristique. 
 
Nulla quis mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit nec ipsum accumsan cursus. Nunc vitae lorem a tellus aliquam luctus eu eget turpis. Vivamus dapibus elementum imperdiet. Nullam facilisis mauris ac tellus fringilla volutpat. Sed elementum ligula dolor, vitae tincidunt ligula ultrices in. 
 
\t \t \t </p>