如何包装这样的div？

考虑你有一个固定身高和体重的div（在图中最里面的一个），并且你想让周围的div包含它， 1时。你会怎么做？如何包装这样的div？

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

来源

2011-02-02 helpermethod

我喜欢你的显示名称。 :) – 2011-02-02 20:24:34

一种方法是使用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。

来源

2011-02-02 20:18:51

哇，知道这真的很好。但是`inline-block`是做什么的？我只知道`display：inline`和`display：block`。 – helpermethod 2011-02-02 20:27:53

它几乎可以做到你想象的那样。这是一个[很好的解释]（http://www.quirksmode.org/css/display.html#inlineblock）。 – 2011-02-02 20:59:43

见工作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"/>');

来源

2011-02-02 20:19:46

我的解决办法是使用以下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/

来源

2011-02-02 20:27:55 Sotiris

这里是肯Redler的解决方案变体使用保证金，而不是填充（保证金境外，填充是车厢边框）。

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

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

这里是一个example fiddle

来源

2011-02-02 20:30:00 DwB

如何包装这样的div？

回答

相关问题