html - 动态创建的图像布局

Question

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

[注意：我不想准确地生成这种布局——我知道如何用 HTML 中的表格和行跨度/列跨度（丑陋）来构建它，但是如何以编程方式和良好地进行构建？]

我真的不知道如何解决这个问题，因为 HTML 是相当基于 box-row-column 的，而这有点脱离了这一点。有没有办法让它更容易编程？（也许是绝对定位，只是抨击计算？）

一个后续问题可能是如何避免不可避免的不精确尺寸的问题。只要所有东西都排成一列并相互对齐，下面有类似的东西就可以了。

Answer 1

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

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