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

Posted 2023-03-05

【中文标题】如何水平对齐多个图像（连续）？

【英文标题】：How to align multiple images horizontally (in a row)?

【发布时间】：2014-10-01 20:46:23

【问题描述】：

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

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

html：

<div id="content">
    <img src="Content/Images/Personal/Georges.jpg"  class="images" />
    <img src="Content/Images/Personal/Rose.jpg"  class="images" />
    <img src="Content/Images/Personal/Henry.jpg"  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;

提前谢谢你。

【参考方案1】：

有很多方法可以将图像对齐在一行中。使用display:inline-block方法检查DEMO。

1. using `float:left` /*you have to clear the float using `overflow:hidden` on parent element */
2. using `display:inline-block`
3. using `Flex` /*Its a new CSS3 property */

注意：我建议您根据您的要求更改您的 HTML 标记，并且需要在此处使用 ul 列表。

【讨论】：

使用 float:left，我只能将它们放在彼此之上； display: inline-block 对我也没有帮助，但是，我不知道 Flex 吗？我的代码前面一定有问题，或者我不明白。谢谢你的回答

你必须在父元素上使用overflow:hidden。

Flex /*它是一个新的 CSS3 属性*/

我得查一下那个属性，谢谢你的帮助 Kheema ！

【参考方案2】：

试试这样：Demo

CSS：

#content img

display: inline-block;
    margin-right:5px;
    border:1px solid #ccc;

【参考方案3】：

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

white-space:nowrap;

Demo Fiddle

More on white-space from MDN

nowrap 像正常一样折叠空白，但禁止换行 （包装）。

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

【参考方案4】：

只需更改 display: block; 并将 float:left 属性添加到 css .images 类

【参考方案5】：

将图像的 css 编辑为：

.images

display: inline-block;
float:left;
margin: 0px;
padding: 0px;