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

前端之家收集整理的这篇文章主要介绍了javascript – 如何动态地将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/

原文链接:https://www.f2er.com/html/426020.html

猜你在找的HTML相关文章