强制图像行答案

【问题标题】：Force row of images强制图像行
【发布时间】：2015-02-05 18:04:31
【问题描述】：

我更像是一个设计师而不是一个程序员，所以如果这个问题看起来很愚蠢并且答案很明显，我深表歉意。

不管怎样，有了这个警告......我正在尝试创建一个页面，其中图像在屏幕右边缘延伸的一排，以便用户可以滚动以查看更多图像.徽标和导航等其他界面元素已固定到位。

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

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

要删除图像之间的空格，我将它们向左浮动。

我的问题是，为了防止图像换行，即使在容器 div 和 display: block 上有一个 height 属性，我也必须给 div 一个宽度值，在本例中为 4000px。例如，自动宽度会使图像换行，这是我不想要的！

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

非常感谢。

【问题讨论】：

请添加您的代码，甚至更好地在其中制作一个 js 摆弄您的代码......这将使任何答案都变得有价值，即使您将来更改网站。
好吧，我猜你的意思是这个...jsfiddle.net/cbrp0L6d

标签： html css image row

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

【讨论】：