浮点CSS定位

Question

我正在尝试在同一行中对齐多个图像。我正在使用float:left执行此任务。问题是图像很大，浏览器会在很多行中显示它们。我怎么能在一行中订购几个html元素，尽管它没有足够的空间？

由于

Answer 1

您可以在图像周围包装父div，并将white-space:nowrap;属性设置为此div。

<div id="parent">
    <img src="" width="300" height="300" />
    <img src="" width="300" height="300" />
    <img src="" width="300" height="300" />
    <img src="" width="300" height="300" />
    <img src="" width="300" height="300" />
</div>

#parent{
    white-space: nowrap;
}

查看工作fiddle。

Answer 2

请查看以下链接。

Fiddle

 div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}