html - Dynamically created image layout -


using html, css, , jquery, , given set of images various dimensions, how generate image layout resembling below?

desired layout

[note: don't want generate exactly layout - know how construct in html tables , rowspan/colspan (ugly), how programmatically, , nicely?]

i have no idea how approach this, html rather box-row-column-based, , sort of stepping out of that. there way @ makes easier program? (perhaps absolute positioning , bashing out computations?)

a follow-up question might how avoid problem of inevitably inexact dimensions. fine have below, long everything's lined , square each other.

alternate layout

using css position easy way long have static image data here i.e. have images , not change. harm here have calculate positions manually.

just make "holder" div , give css position: relative, inner stuff position: absolute:

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

css:

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

Comments

Popular posts from this blog

c# - SelectList with Dictionary, add values to the Dictionary after it's assigned to SelectList -

how can i manage url using .htaccess in php? -

ios - I get the error Property '...' not found on object of type '...' -