无论浏览器缩放级别如何,如何使图像排成一行？

Question

似乎无论我做什么,当我放大浏览器时,我都无法将一行图像水平排列.当我放大时,最右边的图像将下拉到下一行而不是离开屏幕.我试过float:left;,创造了一个边界,position:relative;但没有运气.

如果我使用position:absolute;它似乎我必须手动定位每个图像.

我的目标是使用像这里的jquery制作一个滑动图像库:http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/

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

Answer 1

尝试将图像包装在100%的容器div宽度中,overflow: hidden;这将停止出现滚动条 - 然后将white-space容器div 的属性设置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>