如何相对于内容动态地将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/