Cómo envolver divs como este?

Considere que tiene un div con altura y peso fijos (en el dibujo el más interno), y quiere que los divs que lo rodean lo contengan, con un margen de salida de, por ejemplo, 1 em. ¿Cómo lo harías tú?

+--------+ | +-----+| | |+---+|| | || ||| | |+---+|| | +-----+| +--------+ 

Una forma es usar el estilo de visualización de inline-block :

 div { border: 1px solid blue; } div.wrapper { border: 1px solid red; padding: 1em; display: inline-block; } 

Para este HTML:

 
This

Aquí hay un ejemplo: http://jsfiddle.net/redler/zSrXA/

También puede intentar jugar con display: table-cell .

Aquí hay una variante de la solución de Ken Redler que usa margen en lugar de relleno (el margen está fuera del borde, el relleno está dentro del borde).

 div.inner { border: 1px solid blue; margin: 1em; } div.outter { border: 1px solid red; margin: 1em; display: inline-block; } 

Aquí hay un ejemplo de violín

Mi solución es la siguiente position:relative uso position:relative :

html

 

css

 div {position:relative;top:1.5em; left:1.5em} #first {width:200px; height:200px; background:green} #second {width:150px; height:150px; background:blue} #third {width:100px; height:100px; background:black} 

demo: http://jsfiddle.net/khfMe/

Vea el ejemplo de trabajo aquí ..

 
 

A continuación, utilice jQuery para ajustar los div como sea necesario.

 $('#div1').wrap('
').wrap('
');