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;

Demo Fiddle

More on white-space from MDN

nowrap 按正常情况折叠空白，但会抑制换行符（包装）。

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

Answer 2

将图像的css编辑为：

.images
{
display: inline-block;
float:left;
margin: 0px;
padding: 0px;
}

Answer 3

有很多方法可以将图像对齐在一行中。使用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列表。

Answer 4

请尝试以下操作： Demo

CSS：

#content img
{
display: inline-block;
    margin-right:5px;
    border:1px solid #ccc;
}

Answer 5

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

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

5 个答案:

Demo Fiddle