How to wrap divs like this?
Consider you have a div with fixed height and开发者_JAVA百科 weight (in the drawing the innermost one), and you want the surrounding divs to contain it, with an out margin of e.g. 1 em. How would you do that?
+--------+
| +-----+|
| |+---+||
| || |||
| |+---+||
| +-----+|
+--------+
One way is to use the inline-block
display style:
div { border: 1px solid blue; }
div.wrapper {
border: 1px solid red;
padding: 1em;
display: inline-block;
}
For this HTML:
<div class="wrapper">
<div class="wrapper">
<div style="width: 100px; height: 83px;">This</div>
</div>
</div>
Here's an example: http://jsfiddle.net/redler/zSrXA/
You can also try playing with display: table-cell
.
Here is a variant of Ken Redler's solution that uses margin instead of padding (margin is outside the border, padding is inside the border).
div.inner
{
border: 1px solid blue;
margin: 1em;
}
div.outter
{
border: 1px solid red;
margin: 1em;
display: inline-block;
}
Here is an example fiddle
My solution is the following using position:relative
:
html
<div id="first">
<div id="second">
<div id="third"></div>
</div>
</div>
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/
See the working example here..
<div class="margin1" id="div1"> </div>
<style>
.margin1
.margin1{
margin:1em;
border:1px solid red;
display:inline-block;
}
#div1{
height:40px;
width:20px;
}
</style>
Then use jQuery to wrap the div's as required..
$('#div1').wrap('<div class="margin1"/>').wrap('<div class="margin1"/>');
精彩评论