文字环绕图像，到一列

Question

我有一个图像我想要文字环绕，但在大约793px我希望它只是下降到一列，图像顶部，文字底部。我用float：none尝试了一个媒体查询，但由于某种原因，这种方式无效。提前致谢！

/*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

您遇到的问题的原因是，图像是内嵌在默认情况下，所以我们需要在媒体查询添加display: block的形象。此外，您的媒体查询缺少一些组件。

CSS：

img{ 
    float: left; 
} 

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

这应该做的伎俩。这是一个fiddle。

UPDATE 居中的图像有一定的余量以及更新的小提琴和代码。

Answer 2

我觉得其他的答案很好。当我意识到其中一个问题是您的媒体查询格式不正确时，我实际上正在努力解决您的错误。分号弄乱了事情。无论如何，快乐的编码！

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>