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;这将停止出现滚动条 - 然后将容器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>

Answer 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>

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

2 个答案: