无论浏览器缩放级别如何，如何使图像连续排列？
Posted
技术标签:
【中文标题】无论浏览器缩放级别如何，如何使图像连续排列？【英文标题】：How to make images line up in a row regardless of browser zoom level? 【发布时间】：2011-09-21 19:19:21 【问题描述】：似乎无论我做什么，当我放大浏览器时，我都无法让一排图像水平排列。当我放大时，最右边的图像将下降到下一行，而不是离开屏幕。我试过float:left;，创建一个边框和position:relative;，但没有运气。
如果我使用position:absolute;，似乎我必须手动定位每个图像。
我的目标是使用 jquery 制作一个滑动图片库，如下所示：http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/
我不想复制上面链接中的代码，因为我想通过了解基本构建块从头开始创建所有内容。
【问题讨论】：
【参考方案1】：尝试将图像包装在宽度为 100% 的容器 div 中，使用 overflow: hidden; 这将停止出现滚动条 - 然后将容器 div 的 white-space 属性设置为 nowrap 这应该会强制图像保留一行，但容器区域外的溢出将被隐藏，允许您编写对左/右偏移或边距的更改的脚本 - 您可以使图像显示为内联或内联块
请注意，如果这些图像还有标题文本，则空白属性也会影响标题中的文本，因此您可能需要将任何标题重置为 white-space: normal
示例 CSS：
#container
width: 500px;
height: 300px;
overflow: hidden;
border: 3px double #000;
white-space: nowrap;
#container img display: inline-block; margin: 0 100px;
HTML：
<div id="container">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
</div>
【讨论】：
【参考方案2】：尝试在固定宽度的图像周围创建一个容器 div，即：以 px 为单位
<html>
<head>
<title></title>
<style type="text/css">
#container width:1100px;
img width:200px; height:100px; margin: 0 10px; float:left;
</style>
</head>
<body>
<div id="container">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
【讨论】：
以上是关于无论浏览器缩放级别如何，如何使图像连续排列？的主要内容，如果未能解决你的问题，请参考以下文章