如何包装这样的div？ [英] How to wrap divs like this?

问题描述

考虑你有一个具有固定高度和重量的div（在图形中最内层的div），你想让周围的div包含它， 1 em。

Consider you have a div with fixed height and 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?

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

推荐答案

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

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;
}

对于此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 。

这篇关于如何包装这样的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！