使用不完整的第一行而不是最后一行

时间:2016-09-25 18:25:16

标签: javascript html css

我正在努力解决一个似乎超出我能力的问题。

事情显然很容易。有一个< img>的集合图像,位于< div>中框并动态添加到它。图像将按行排列,标准自动换行,受到< div>宽度的限制,但它们应以不完整行不是最后一行但始终是第一行的方式排列,图像的顺序保持不变,从最旧到最新。也许这个模型会比文字更好地解释它。该示例是每行4个图像:

[1]

[1] [2]

[1] [2] [3]

[1] [2] [3] [4]

[1]
[2] [3] [4] [5]

[1] [2]
[3] [4] [5] [6]

[1] [2] [3]
[4] [5] [6] [7]

[1] [2] [3] [4]
[5] [6] [7] [8]

[1]
[2] [3] [4] [5]
[6] [7] [8] [9]

依旧......

因此,最后一行应始终包含与< div>的宽度一样多的图像。可以处理。为了使问题更加困难,图像可以具有不同的宽度,因此不同的行可以包含不同数量的图像。无论图像是左对齐,右对齐还是居中对齐,它都应该有效。

我尝试了不同的css解决方案,包括限制第一行宽度的第一行伪类,但它似乎没有处理width属性。什么都行不通。

我会欠很多建议。

1 个答案:

答案 0 :(得分:0)

如果!=4附加<img>,您可以实施一个Javascript处理程序来扫描&#34;行&#34;(每行的您的类)中的图像数量} element to&#34; row&#34;。然后你可以根据你的类使用javascript / jquery进行分类和重新排序。例如&#34; row&#34;现在可以成为&#34;全行&#34;然后,当添加新图像时,可以创建新的<div class="row">,因为第一个现有行具有 &#34;全行&#34;类。

相关问题