如何让图片排成一排，而不管浏览器的缩放级别？
如何让图片排成一排，而不管浏览器的缩放级别？
提问于 2011-06-24 14:50:30
似乎无论我做什么，当我放大浏览器时，我都不能让一排图像水平对齐。当我放大时，右边最远的图像将下降到下一行，而不是离开屏幕。我试过float:left;，创建了一个边框，还有position:relative;，但是没有成功。
如果我使用position:absolute;，似乎我必须手动定位每个图像。
我的目标是使用jquery创建一个滑动图片库，就像下面这样：http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/
我不想复制上面链接中的代码，因为我想通过理解基本的构建块从头开始创建一切。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-06-24 15:20:05
尝试将图像包装在容器div width 100%中，使用overflow: hidden;会停止滚动条显示-然后将容器div的white-space属性设置为nowrap这将强制图像停留在一行上，但容器区域外的溢出将被隐藏，允许您编写更改到左/右偏移量或边距-您可以使图像显示内联，或内嵌块
Nate说，如果这些图像中也有标题文本，则空白属性也会影响标题中的文本，因此您可能需要将所有标题重置为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>Stack Overflow用户
发布于 2011-06-24 14:54:13
尝试在图片周围创建一个固定宽度的容器div，例如: in 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6464383
复制相关文章
相似问题
腾讯云开发者
