html - 根据 div 中的可用空间自动放置图像

Question

我的问题是：在一个 div 中（例如高度 500 像素，宽度 500 像素），如果我插入两个宽度大于 div 的图像，则两个图像中的一个放置在下面的行中。但是，如果我随后插入第三张缩小尺寸的图像，它可以放在第一行中，而不是放在第二张图像之后。如何根据 div 中的可用空间定位图像？这样大图像将被放置在另一行，而较小的图像将占据剩余的空间。我应该这样做，而无需手动更改 html 中图像的顺序。最后一件事，图像必须全部合并，没有空格。感谢那些会回答我的人

标签： htmlcss

Answer 1

如果值得麻烦的话，这在 javascript/jquery 中非常简单。您可以获取所有图像的宽度，然后将它们相加并对其进行索引，然后数学 > 500 ... jquery 使用每个逻辑和索引来定位图像循环遍历它们--image1 width=300 image2=300 image 3 = 100，图像4 = 100...

一旦它们全部被索引，如果总 < 500 则接下来的事情。如果你知道 jquery 和 js，这对你来说应该是有意义的，如果不知道，你可能无法编写它，也许应该继续。