如何水平对齐多个图像（连续）？

如何水平对齐多个图像？它们不必适合宽度屏幕：相反，我想让它们超过后者的宽度，如果这有意义的话。

我检查了类似问题的很多答案，但找不到任何可以解决我的问题的答案。

Html:

<div id="content">
    <img src="Content/Images/Personal/Georges.jpg" alt="Georges" class="images" />
    <img src="Content/Images/Personal/Rose.jpg" alt="Gers" class="images" />
    <img src="Content/Images/Personal/Henry.jpg" alt="Providence" class="images" />
</div>

Css:

.images
{
display: inline;
margin: 0px;
padding: 0px;
}

#content
{
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
}

先感谢您。

实际上，您想要防止inline img来自包装的元素，因此，您需要在父级上使用以下内容#content元素：

white-space:nowrap;

演示小提琴 http://jsfiddle.net/swfour/s7my93yq/

More on white-space来自MDN https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

nowrap与正常情况一样折叠空白，但抑制换行 （包装）。

这种风格专门用于您需要的目的。