html - Row of flushed IMG blocks in CSS -


what i'm attempting best explained crudely mocked-up image: problem example

that is, in row there 'blocks' of 3 flush images. top 2 next each other, underneath them both. there 0 gap between images.

i've found way appears work in firefox, generates gaps in ie:

<div style="float: left; margin-left: 3px;">   <img src="1.png" style="float:left;"/>   <img src="2.png" />   <img src="3.png" /> </div> 

excuse inline styles, they're testing only. it'd nice 1. not have float: left on load of things, , 2. not have specify sensible margin between them. 'natural' margin fine.

there must better way this. can help?

how use this?

img{     width: 20px;     height: 20px;     background-color: red;     display: inline-block;     margin-right: -3px;     border: 1px solid blue; } img:last-child{     display: block;     width: 43px;  } 

demo


Comments

Popular posts from this blog

assembly - 8086 TASM: Illegal Indexing Mode -

Java, LWJGL, OpenGL 1.1, decoding BufferedImage to Bytebuffer and binding to OpenGL across classes -

javascript - addthis share facebook and google+ url -