javascript – 如何动态地将div放在另一个div元素相对于内容的

发布时间：2020-12-14 22:52:51 所属栏目：资源来源：网络整理

导读：我目前正在尝试专门定位多个div,在另一个div中,它本身在另一个div中. 要了解我正在尝试做的事情：我有一个具有特定高度和宽度的父div.在div元素内部应该是另一个div(白色边框),它是居中的.同样,在div内部应该是一些特定位置(绿色)的div.应该创建绿色div并通

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

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

我有一个具有特定高度和宽度的父div.在div元素内部应该是另一个div(白色边框),它是居中的.同样,在div内部应该是一些特定位置(绿色)的div.应该创建绿色div并通过javascript函数追加.

我现在希望中心div的高度和宽度动态变化,当我把我的绿色div放在里面.

我目前的代码是：

HTML：


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 = $("

到目前为止,我的内容基于本指南：
http://www.vanseodesign.com/css/vertical-centering/
div的大小如何根据其内容而变化？
如果您更改此内容,div会保持居中吗？


最佳答案
如果我理解你不需要任何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：

 

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

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!