动态创建图像布局

Question

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

[注意：我不想生成完全这个布局 - 我知道如何用HTML和rowspan / colspan（丑陋）在HTML中构建它，但是如何以编程方式，很好地？

我真的不知道如何处理这个问题，因为HTML是基于行 - 列的，而且这有点踩到了它。有没有办法让它更容易编程？ （也许绝对定位，只是抨击计算？）

后续问题可能是如何避免不可避免的不精确维度的问题。只要一切都排成一行并且相互正方形，就可以拥有下面这样的东西。

Answer 1

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

只需制作一个“持有者”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**;
}