Question

我更多的是设计师而不是编码员，所以如果这个问题看起来像是头脑发热并且答案显而易见，那么道歉。

无论如何，有了这个警告......我试图创建一个页面，其中图像在一行中延伸出屏幕的右边缘，以便用户可以滚动查看更多图片。徽标和导航等其他界面元素已固定到位。

您可以在此处查看页面：http://werewolf.phantomlimb.net/

和CSS在这里：http://werewolf.phantomlimb.net/wolf.css

为了移除图像之间的空间，我将它们向左浮动。

我的问题是，为了防止图像被包装，即使在容器div和display：block上有一个height属性，我也必须给div一个宽度值，在这种情况下为4000px。例如，auto的宽度会使图像换行到新行，这就是我 想要的！

由于我可能并不总是知道组合图像的确切宽度，我是否可以使用宽度值来强制图像保持单行或其他CSS技巧？

非常感谢。

Ĵ

Answer 1

我会使用inline-block来处理这种事情。

这样的事情：

#imgHolder{
    font-size: 0px; /* Remove the spaces between the images */ 
    white-space: nowrap; /* Prevent the images from wrapping */
}

#imgHolder img{
    display: inline-block;
    vertical-align: top;
    height: 654px;
    width: auto;
}

这是一个有效的例子：

http://jsfiddle.net/155ukfwp/

强制排成一排图像

1 个答案: