Question

考虑你有一个具有固定高度和重量的div（在图中最里面的一个），并且你希望周围的div包含它，其边缘为例如1个月你会怎么做？

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

Answer 1

一种方法是使用inline-block显示样式：

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

对于这个HTML：

<div class="wrapper">
<div class="wrapper">
<div style="width: 100px; height: 83px;">This</div>
</div>
</div>

以下是一个示例：http://jsfiddle.net/redler/zSrXA/

您也可以尝试使用display: table-cell。

Answer 2

以下是Ken Redler解决方案的变体，它使用边距而不是填充（边距位于边框之外，填充位于边框内）。

div.inner
{
    border: 1px solid blue;
    margin: 1em;
}

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

这是example fiddle

Answer 3

查看工作example here ..

<div class="margin1" id="div1">&nbsp;</div>

<style>
.margin1
.margin1{
margin:1em;
    border:1px solid red;
    display:inline-block;
}
#div1{

    height:40px;
    width:20px;
}
</style>

然后使用jQuery根据需要包装div ..

$('#div1').wrap('<div class="margin1"/>').wrap('<div class="margin1"/>');

Answer 4

我的解决方案如下，使用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}

演示： http://jsfiddle.net/khfMe/

如何包装像这样的div？

4 个答案: