Html 使用媒体查询调整网站大小，但调整大小时文本不换行

当最大宽度达到960px时，我尝试使用媒体查询来重新调整“关于我”窗口的大小，但文本没有环绕在图像下，其中一些保留在图像的侧面。我已经设置好了，所以当它达到960像素时，“关于我”部分会缩小50%。谁能帮忙，我不知道我做错了什么

多谢各位

以下是我的html和css：

*{
框大小：边框框；
}
标题{
/*如何使页眉保持在页面顶部和封面顶部*/
宽度：100%；
背景：#ffffff；
边框底部：#666666 4px实心；
溢出：自动；
/*宽度：270px*/
}
李：最后一个孩子{
边界：无；
}
h2.namebox{
背景色：#4aaaa5；
字号：900；
颜色：#ffffff；
字母间距：0.5px；
边框：1px黑色；
浮动：左；
填充：20px；
保证金：自动；
左边距：31px；
字母间距：0.5px；
字号：900；
字体系列：格鲁吉亚；
}
导航箱{
保证金：0；
填充：0；
显示：内联；
浮动：对；
颜色：#777777；
}
李娜：最后一个孩子{
右边界：没有！重要；
}
a:链接{
文字装饰：无；
颜色：蓝色；
}
a:参观了{
文字装饰：无；
颜色：灰色；
}
a:悬停{
文字装饰：下划线；
颜色：绿色；
}
a:主动的{
文字装饰：下划线；
}
李{
浮动：左；
显示：内联；
保证金：5px0.5px；
左边框：1px实心#333；
填充：10px；
/*文本装饰：无；不删除链接*/
}
h1.1线{
颜色：#4aaaa5；
字体系列：“安东”，无衬线；
显示：块；
高度：10px；
边界：0；
填充：2px；
}
身体{
宽度：960px；
背景图片：url(http://www.designbolts.com/wp-content/uploads/2013/02/Textured-Stripes-Grey-Seamless-Patterns-For-Website-Background.jpg);
背景重复：重复；
保证金：自动；
}
部门内容{
保证金：自动；
明确：两者皆有；
}
分区{
背景色：#ffffff；
颜色：#777777；
宽度：650px；
边框：1px纯灰；
左侧填充：20px；
右边填充：20px；
利润率：30px 30px；
明确：两者皆有；
溢出：自动；
}
.形象{
浮动：左；
填充：20px；
溢出：隐藏；
}
第1部分{
宽度：200px；
高度：160px；
浮动：对；
边框：1px纯灰；
文本对齐：居中；
z指数：1；
背景色：#ffffff；
颜色：#4aaaa5；
明确：两者皆有；
溢出：自动；
保证金：自动；
}
人力资源热线{
浮动：中心；
宽度：75%；
边缘底部：13px；
}
h3.1线{
字体系列：“Fjalla One”，无衬线；
字号：19px；
位置：中心；
填充：0；
}
页脚{
背景色：#666666；
颜色：#ffffff；
边框顶部：teal 6px固体；
文本对齐：居中；
/*如何使其覆盖整个网页底部*/
填充：40px0；
保证金：自动；
明确：两者皆有；
溢出：自动；
}
@媒体屏幕和屏幕（最大宽度：980px）{
分区{
宽度：50%；
高度：自动；
}
第1部分{
}
}

文件夹
伙计





关于我

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

与我联系

&抄袭；版权所有2017

这是因为您正在浮动图像，因此在包装之前，文本将尽可能多地位于侧面

您可以将以下内容添加到媒体查询中的图像中，以推送下面的文本

.section img {
  width: 100%;
}

或者，如果您想避免调整图像的大小，可以只设置

float:none取而代之

.section img {
  float: none;
}

（用于演示的lorempixel图像）