Css 浮动问题：调整浏览器大小时，两个图像切换位置

我在调整浏览器大小时遇到格式问题。我有两个图像切换位置，似乎是因为它们是浮动的。有没有一种简单的方法可以防止这两个图像切换

这是我的html文件。调整浏览器大小时，图像

left.png

和“all.png”将切换位置。我需要他们呆在原地。我怎样才能做到这一点？ 来看看我希望这些图像如何表现。请注意，在链接文件中，它们如何不切换位置

正文{
字体系列：“Hiragino Sans GB”、“Microsoft YaHei”、“WenQuanYi Micro Hei”、无衬线；
}
.os_mac{
字体系列：“ff-tisa-web-pro-1”、“ff-tisa-web-pro-2”、“Lucida Grande”、“Hiragino Sans GB”、“Hiragino Sans GB W3”；
}
ul#图书目录{
宽度：100%；
保证金：0自动；
}
#覆盖层{
位置：绝对位置；
排名：0；
左：0；
z指数：500；
宽度：100%；
身高：100%；
不透明度：0.8；
过滤器：α（不透明度=80）；
-ms过滤器：“progidXImageTransform.Microsoft.Alpha（不透明度=80）”；
背景：#000；
}
#错误框{
填充：0 10px 0 10px；
位置：绝对位置；
z指数：900；
背景：#ffffff；
颜色：#000000；
高度：30px；
线高：30px；
字体大小：14px；
边框左下半径：5px；
边框右下半径：5px；
排名：0；
左：50%；
盒影：0px20pxRGBA（0,0,0,2）；
显示：无；
}
#elmo_电子书_容器{
背景：#f8f8；
最大宽度：1010px；
最大高度：无；
身高：100%；
/*集装箱100%高度*/
保证金：0自动；
盒影：0px20pxRGBA（0,0,0,2）；
*缩放：1；
/*ie6怪癖模式*/
位置：相对位置；
}
.导航，
#电子书\u iframe\u容器{
浮动：左；
}
#电子书框架{
最大宽度：576px；
/*iframe的最大宽度与画布相同*/
最大高度：576px；
}
#电子书\u iframe\u虚拟{
左：576px；
}
.导航{
身高：100%；
宽度：19.80198%；
/*200/1010*/
保证金：0；
填充：0；
}
李国荣先生{
身高：50%；
宽度：100%；
填充：0；
保证金：0；
位置：相对位置；
}
李线{
边框顶部：1px实心#ccc；
}
#电子书\u iframe\u容器{
填充：20px；
宽度：60.39604%；
身高：100%；
最小高度：100px；
位置：相对位置；
方框阴影：插入0px 0px 10px rgba（0,0,0,0.3）；
}
#电子书框架{
背景：#ffffff；
}
.导航a{
位置：绝对位置；
显示：块；
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.nav a img{
宽度：80%；
高度：自动；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
.导航a:悬停{
文字装饰：无；
颜色：#555；
背景:#f5；
}
/*缩略图传送带*/
#拇指{
最大宽度：1010px；
位置：绝对位置；
宽度：100%；
z指数：999；
背景：#fff；
左：50%；
最高：50%；
盒影：0px20pxRGBA（0,0,0,2）；
可见性：隐藏；
边框样式：实心；
边框颜色：#中交；
边框宽度：2px0px；
}
#查看所有{
最大宽度：1010px；
位置：绝对位置；
宽度：100%；
z指数：999；
背景：#fff；
左：50%；
最高：50%；
盒影：0px20pxRGBA（0,0,0,2）；
可见性：隐藏；
边框样式：实心；
边框颜色：#中交；
边框宽度：2px0px；
}
.jcarousel包装纸{
利润率：10px自动；
位置：相对位置；
}
/**旋转木马**/
伊卡洛斯先生{
位置：相对位置；
溢出：隐藏；
宽度：100%；
}
伊卡洛斯{
宽度：20000em；
位置：相对位置；
列表样式：无；
保证金：0；
填充：0；
}
李先生{
宽度：300px；
浮动：左；
填充：0 5px 0 5px；
左边框：1px实心#ccc；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
.jcarousel img{
显示：块；
最大宽度：100%；
保证金：0自动；
高度：自动！重要；
光标：指针；
}
李嘉诚先生{
显示：块；
宽度：100%；
身高：100%；
}
/**旋转控制**/
.jcarousel控制前，
.jcarousel控件下一步{
位置：绝对位置；
最高：50%；
利润上限：-60px；
宽度：120px；
高度：120px；
文本对齐：居中；
背景：#4E443C；
颜色：#fff；
文字装饰：无；
不透明度：0.7；
字体：60px Arial，无衬线；
线高：120px；
显示：块；
-webkit边界半径：50%；
-moz边界半径：50%；
边界半径：50%；
-webkit盒阴影：0 0 4px#F0EFE7；
-moz盒阴影：0 0 4px#F0EFE7；
盒影：0 0 4px#F0EFE7；
}
.jcarousel控件上一个：悬停，
.jcarousel控件下一步：悬停，
.jcarousel控件关闭：悬停{
背景：#d7352c；
}
.jcarousel控制关闭{
位置：绝对位置；
最高：5%；
右：1%；
不透明度：0.7；
利润上限：-15px；
宽度：30px；
高度：30px；
文本对齐：居中；
背景：#4E443C；
颜色：#fff；
文字装饰：无；
字体：24px/27px Arial，无衬线；
-webkit边界半径：30px；
-moz边界半径：30px；
边界半径：30px；
-webkit盒阴影：0 0 4px#F0EFE7；
-moz盒阴影：0 0 4px#F0EFE7；
盒影：0 0 4px#F0EFE7；
}
.jcarousel控制前{
左：15px；
}
.jcarousel控件下一步{
右：15px；
}
/**轮转分页**/
.jcarousel分页{
位置：绝对位置；
底部：-20px；
左：50%；
显示：无；
-webkit转换：转换（-50%，0）；
-ms转换：转换（-50%，0）；
转换：转换（-50%，0）；
保证金：0；
}
.jcarousel分页a{
文字装饰：无；
显示：内联块；
字体大小：11px；
高度：10px；
宽度：10px；
线高：10px；
背景：#fff；
颜色：#4E443C；
边界半径：10px；
文本缩进：-9999px；
右边距：7px；
-webkit盒阴影：0 0 2px#4E443C；
-莫兹盒阴影：0 0 2px#4E443C；
盒影：0 0 2px#4E443C；
}
.jcarousel分页a.active{
背景：#4E443C；
颜色：#fff；
不透明度：1；
-webkit盒阴影：0 2px#F0EFE7；
-moz盒阴影：02px#F0EFE7；
盒影：02px#F0EFE7；
}
/*媒体查询*/
@介质（-webkit最小设备像素比：2），
（最小分辨率：192dpi）{
/*视网膜特异性物质*/
}
@媒体和全部（方向：纵向）{
/*风格调整