给定内部 div 动态创建同心 div答案

【问题标题】：Dynamically creating concentric div given the inner div给定内部 div 动态创建同心 div
【发布时间】：2013-05-29 12:11:34
【问题描述】：

我有 2 个 div：

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

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

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

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

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

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

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

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

添加Fiddle

也在找jquery/js的解决方案。

【问题讨论】：

只是用你已经完成的事情来创造一个小提琴
我是否遗漏了什么，或者这只是在外部 div 上添加一些填充的问题？
srry 编辑了我的任务并添加了小提琴。

标签： javascript jquery

【解决方案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

【讨论】：

nice thx.. 还有没有办法计算外部 div 的 left 和 top 而不是 CSS 方式？
sry 我添加了另一个编辑。基本上在某些情况下填充不相等，也更新了图像
所以，使用不相等的填充。像padding: 200px 50px 30px 65px; 这样的填充也可以在必要时通过 JavaScript 计算和设置。
我不太清楚为什么你不想用 CSS 来做这件事。 Javascript 应该是可以首先使用 css 完成的样式的最后手段。如果您知道内框尺寸，那么最佳做法是使用我向您展示的方法，但更改顶部与右侧的边距等。
我更喜欢填充，原因有一个：边距折叠。两个相邻的边距将合并为一个，较大的边距优先。因此，边距可能会导致一些意想不到的效果。

【解决方案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;

}

【讨论】：

thx ..也就像你在下面的 cmets 中所说的那样.. 我该怎么做 jquery 方式？我为相同的问题添加了一个编辑
这些 div 是绝对定位的吗？
本质上，$('#inner').css({ margin: $('#inner').outerWidth(true)/2});
sry 我添加了另一个编辑。基本上在某些情况下填充不相等，也更新了图像
您基本上可以使用相同的 jquery 方法分别设置左右边距，分别设置边距顶部和底部。

【解决方案3】：

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

【讨论】：

我以为是((outerHeight - innerHeight) / 2) 和((outerWidth - innerWidth) / 2)。
将边距设置为宽度的一半是行不通的。试试看。