javascript - 给定内部 div 动态创建同心 div

Question

我有 2 个 div：

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

内部 div 有一些固定的 height(H) 和 width(W) 。最初，“外部” div 没有
宽度和高度。也有相同的顶部和左侧值。（相同的来源）

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

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

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

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

Edit2：早期的图像有点误导。div 比正方形更矩形。因此，左右填充相等，顶部和底部相同，但值不同。

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

添加小提琴

也在寻找 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;
}

这是一个工作示例

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 与其同心。