给出内部div动态创建同心div

Question

我有2个div：

<div id="outer">
     <div id="inner">
     </div>
</div>

内部div具有一些固定高度（H）和宽度（W）。最初“外部”div不是 有宽度和高度。也有相同的顶部和左侧值。（相同的原点）

如何创建/放置同心“外部”div（或使“外部”div同心）
有一些高度OH和宽度OW？

问题是我知道W和H（内部div的宽度和高度）。

我需要外部div的尺寸为OH和OW（外部div的宽度和高度）。

添加了修改： 有没有办法计算外部div的left和top而不是CSS方式？

Edit2 ：早期的图片有点误导。 div比矩形更矩形。所以左边和右边的填充是相同的，也可以是顶部和底部，但是值不同。

即。在某些情况下，dW不等于dH

添加了Fiddle

还在寻找jquery / js解决方案。

Answer 1

1）浮动外部div - 这将强制宽度达到内容的宽度

2）在外部div上添加一些填充

#outer
{
  border: solid 1px red;
  padding: 15px;
  float: left;
}

#inner
{
  width: 300px;
  height: 300px;
  border: solid 1px black;
}

Here's a working example

Answer 2

来自http://jsfiddle.net/judsonmusic/jvyMF/1/

* {
    box-sizing: border-box
}  
#outer{

    border:1px solid grey;
    display: inline-block;

}
#inner{

    border:1px solid grey;
    width:100px;
    height:100px;
    float: left;
    margin:50px;

}

Answer 3

您需要在宽度或高度的内部div 1/2上设置边距。这会使它周围的div与它同心。