動態創建的圖像佈局

Question

使用HTML，CSS和JQuery，並給出一組具有不同尺寸的圖像，我將如何生成類似於下圖的圖像佈局？

[注：我不想產生正是這個佈局 - 我知道如何與表和行跨度/合併單元格（醜）構建在HTML中，但如何編程，並很好地？ ]

我真的不知道該如何解決這個問題，因爲HTML是基於box-row-column的，而這是有點過分的。有沒有辦法讓它更容易編程？ （也許絕對定位，只是抨擊計算？）

後續問題可能是如何避免不可避免的不精確維度的問題。只要所有東西排成一行並且相互平行，就可以有類似下面的東西。

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**; 
}