html - 动态创建的图像布局

Question

使用 HTML、CSS 和 JQuery，并给定一组具有不同尺寸的图像，我将如何生成类似于下面的图像布局？

[注意:我不想完全生成此布局 - 我知道如何使用表格和 rowspan/colspan(丑陋)在 HTML 中构建它，但如何以编程方式和很好地构建它？]

我真的不知道如何处理这个问题，因为 HTML 是基于方框-行-列的，而这有点脱离了它。有没有一种方法可以让编程更容易？(也许是绝对定位，只是抨击计算？)

后续问题可能是如何避免尺寸不可避免地不精确的问题。有类似下面的东西就好了，只要所有东西都排成一行并且彼此成正方形。

Answer 1

使用 css position 是简单的方法，只要您在此处有静态图像数据，即您有图像并且它们不会改变。唯一的缺点是您必须手动计算位置。

只要做一个“holder”div 并给它 css position: relative，然后里面的东西 position: absolute:

<div id=""holder>
  <img id="image1" />
  <img id="image2" />
  .
  .
  .
</div>

CSS:

#holder {
  position: relative;
}
#image1 {
  position: absolute;
  top: **distance from top goes here**;
  left: **distance from left**;
}