如何相对于内容动态地将div放在另一个div元素中？

Question

我目前正在尝试专门定位多个div，在另一个div中，它本身位于另一个div中。

要了解我正在尝试做的事情：

我有一个具有特定高度和宽度的父div。在div元素内部应该是另一个div（白色边框），它是居中的。同样，在div内部应该是一些特定位置（绿色）的div。绿色div应该由javascript函数创建并附加。

当我把绿色div放在里面时，我现在想让居中的div的高度和宽度动态变化。

我目前的代码是：

HTML：

<div id="grandparent">
    <div id="parent">
        <!-- <div class="child"></div> -->
        <!-- <div class="child"></div> -->
        <!-- <div class="child"></div> -->
        <!-- <div class="child"></div> --> (commented because they're not yet in there)
    </div>
</div>

CSS：

#grandparent{
    height: 130px;
    width: 145px;
    background-color: #000000;
    border: 3px solid #00ffff;
    display: table;
}

#parent{
    display: table-cell;
    vertical-align: middle;
}

.child{
    height: 23px;
    width: 23px;
    float: left;
}

的javascript：

for(var i = 0; i < number; i++){
    var top = ...
    var left = ...
    var child = $("<div class='child'></div>");
    child.css("top", top);
    child.css("left", left);
    $("#parent").append(child)
}

到目前为止，我的内容基于本指南： http://www.vanseodesign.com/css/vertical-centering/

div的大小如何根据其内容而变化？ 如果您更改此内容，div是否会保持居中？

Answer 1

如果我理解你不需要任何JS将div放在里面，只需使用inline-block：

#parent{
  display: table-cell;
  vertical-align: middle;
  text-align:center; /*Add this*/
}

.child{
  height: 23px;
  width: 23px;
  /*float: left; Remove this*/
  display:inline-block; /*Add this*/
}

修改的

根据您的图片，您可能需要额外的div：

 <div id="grandparent">
  <div id="parent">
   <div class="border">
     <div class="child"></div>
        ....

查看完整演示 http://jsfiddle.net/R9YGb/10/