如何水平(连续)对齐多个图像? [英] 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;
演示小提琴
<块引用>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
nowrap Collapses whitespace as for normal, but suppresses line breaks (wrapping).
This style is specifically for the purpose you require.
这篇关于如何水平(连续)对齐多个图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!