无论浏览器缩放级别如何，如何使图像连续排列？答案

【问题标题】：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/

我不想复制上面链接中的代码，因为我想通过了解基本构建块从头开始创建所有内容。

【问题讨论】：

标签： html css image position alignment

【解决方案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>

【讨论】：