[devel-frontend] Tricky image grid, Take 3

POSH note: This attempts to model the current state of the Figure microformat, in the hope that Figure will be completed someday.

View the source and read the comments on the CSS for explanation.

Now with less CSS and much more semantic HTML! Thanks, Hedger!

Now without a fixed height! It just stretches to the content. (Still a fixed width, though.) Note that the last row is a lot shorter.

• Image Label

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang.

• Bigger Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang. Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits.

• Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang.

• Bigger Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang. Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits.

• Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang.

• Bigger Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang. Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits.

• Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang.

• Bigger Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang. Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits.

• Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang.

• Bigger Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang. Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits.

• Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang.

• Bigger Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang. Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits.

• Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang.

• Bigger Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang. Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits.

• Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang.

• Bigger Image Label

  

  More Info

  Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits. Walla walla bing bang. Inline-block on block elements! Even more info about this image. Blah to the bliggity blazah. Lorem ipsum can kiss my grits.