如何水平(连续)对齐多个图像? [英] How to align multiple images horizontally (in a row)?

问题描述

如何将多个图像一个接一个地水平对齐?它们不必适合宽度屏幕:相反，如果有意义的话，我希望它们超过后者的宽度.

我已经检查了很多类似问题的答案，但找不到可以解决我的问题的答案.

HTML:

<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"/>

CSS:

.images{显示:内联；边距:0px；填充:0px；}#内容{显示:块；边距:0px；填充:0px；位置:相对；顶部:90px；高度:自动；最大宽度:自动；溢出-y:隐藏；溢出-x:自动；}

提前致谢.

解决方案

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

white-space:nowrap;

演示小提琴

更多关于white-space来自 MDN

<块引用>

nowrap 像正常一样折叠空白，但禁止换行(包装).

这种风格专为满足您的需求而设计.

How can one align multiple images, one after another, horizontally? They don't have to fit the width screen: on the contrary, I would like to have them exceed the width of the latter, if that makes any sens.

I have checked quite a few answers to similar questions but couldn't find any that would fix my problem.

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

Thank you in advance.

解决方案

Effectively, you want to prevent the inline img elements from wrapping, as such, you want to use the below on the parent #content element:

white-space:nowrap;

Demo Fiddle

More on white-space from MDN

nowrap Collapses whitespace as for normal, but suppresses line breaks (wrapping).

This style is specifically for the purpose you require.

这篇关于如何水平(连续)对齐多个图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！