如何水平对齐多个图像(连续)？

Question

如何一个接一个地水平对齐多个图像？它们不必适合宽度屏幕:相反,我希望它们超过后者的宽度,如果这有任何感觉.

我已经检查了类似问题的相当多的答案,但找不到任何可以解决我的问题.

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;
}

先感谢您.

Answer 1

实际上,您希望阻止inline img元素包装,因此,您希望在父#content元素上使用以下内容:

white-space:nowrap;

演示小提琴

更多white-space来自MDN

nowrap与正常情况一样折叠空白,但抑制换行(换行).

此样式专门用于您需要的目的.