如何像这样包装div？
如何像这样包装div？
提问于 2011-02-03 04:14:04
假设你有一个具有固定高度和重量的div (在图中最里面的那个)，你想让周围的div包含它，外边距为1 em。你会怎么做呢？
+--------+
| +-----+|
| |+---+||
| || |||
| |+---+||
| +-----+|
+--------+回答 4
Stack Overflow用户
回答已采纳
发布于 2011-02-03 04:18:51
一种方法是使用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。
Stack Overflow用户
发布于 2011-02-03 04:30:01
这是Ken Redler的解决方案的一个变体，它使用边距而不是填充(边距在边界之外，填充在边界内)。
div.inner
{
border: 1px solid blue;
margin: 1em;
}
div.outter
{
border: 1px solid red;
margin: 1em;
display: inline-block;
}这是一个example fiddle
Stack Overflow用户
发布于 2011-02-03 04:19:46
请参阅工作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>然后根据需要使用jQuery包装div。
$('#div1').wrap('<div class="margin1"/>').wrap('<div class="margin1"/>');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4879379
复制相关文章
相似问题
腾讯云开发者
