html - 文本环绕图像，到一列

Question

我有一张图片，我想让文字环绕，但在大约 793 像素处，我希望它只下降到一列，图片在顶部，文本在底部。我尝试了一个带有 float: none 的媒体查询，但由于某种原因没有奏效。提前致谢!

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

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

	}

}

<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.

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

更新将图像居中并留有一定的边距以及更新的 fiddle 和代码。