我正在努力解决一个似乎超出我能力的问题。
事情显然很容易。有一个< 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属性。什么都行不通。
我会欠很多建议。
答案 0 :(得分:0)
如果!=
到4
附加<img>
,您可以实施一个Javascript处理程序来扫描&#34;行&#34;(每行的您的类)中的图像数量} element to&#34; row&#34;。然后你可以根据你的类使用javascript / jquery进行分类和重新排序。例如&#34; row&#34;现在可以成为&#34;全行&#34;然后,当添加新图像时,可以创建新的<div class="row">
,因为第一个现有行具有
&#34;全行&#34;类。