Javascript 如何添加div'；在父div的宽度和高度已满/已完成之前，动态地在div中设置

背景：我正在制作一个网页，用户将在其中输入瓷砖宽度和高度以及地板宽度和高度。 地板宽度和高度用于计算地板面积。 瓷砖输入以英寸为单位，地板输入以英尺为单位

技术信息：我已经设置了1英尺等于60像素，1英寸等于5像素的计算

我现在在哪里？ 现在我被困在绘制区域（父分区）中的所有瓷砖（子分区）中。现在我正在使用simple

For

loop来制作瓷砖（div）

现在的输出是这样的

我想要什么？我试图制作一个功能，当用户单击“计算”按钮时，他/她看到的是地板的设计。稍后我将着色并添加图案

输出应该是这样的（请原谅，如果边框不对齐，这是用Windows Paint制作的）：

代码：

$（文档）.ready（函数（）{
$（“#btnCalculate”）。单击（函数（e）{
e、 预防默认值（）；
$（“#面积”）.empty（）；
常数英尺=60，英寸=5；
设tileW=parseFloat（$（“#tileWidth”）.val（）；
让tileH=parseFloat（$（“#tileHeight”）.val（）；
设areaW=parseFloat（$（“#areaWidth”）.val（）；
设areaH=parseFloat（$（“#areaHeight”）.val（）；
$（“#面积”）.css（“高度”，“英尺*面积”）；
$（“#面积”）.css（“宽度”，“英尺*面积”）；
对于（让r=0；r使用
display:flex；flex wrap:wrap
表示面积元素）

并将瓷砖的数量计算为——

（区域宽度像素/平铺宽度像素）*
（区域高度像素/瓷砖八像素）


$（文档）.ready（函数（）{
$（“#btnCalculate”）。单击（函数（e）{
e、 预防默认值（）；
$（“#面积”）.empty（）；
常数英尺=60，英寸=5；
设tileW=parseFloat（$（“#tileWidth”）.val（）；
让tileH=parseFloat（$（“#tileHeight”）.val（）；
设areaW=parseFloat（$（“#areaWidth”）.val（）；
设areaH=parseFloat（$（“#areaHeight”）.val（）；
$（“#面积”）.css（“高度”，“英尺*面积”）；
$（“#面积”）.css（“宽度”，“英尺*面积”）；
让noOfTiles=数学地板（（英尺*面积w）/（英寸*瓷砖））*数学地板（（英尺*面积h）/（英寸*瓷砖））；
警报（“noOf TIles:：”+noOfTiles）；
对于（让r=1；r使用
display:flex
和
flex-wrap:wrap

#area {
  border: 1px solid black;
  height: 25px;
  width: 25px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

并计算每侧（宽度或高度）最多可填充的
div
s的数量


$（文档）.ready（函数（）{
$（“#btnCalculate”）。单击（函数（e）{
e、 预防默认值（）；
$（“#面积”）.empty（）；
常数英尺=60，
英寸=5；
设tileW=parseFloat（$（“#tileWidth”）.val（）；
让tileH=parseFloat（$（“#tileHeight”）.val（）；
设areaW=parseFloat（$（“#areaWidth”）.val（）；
设areaH=parseFloat（$（“#areaHeight”）.val（）；
变量区域高度=（英尺*区域高度）
变量areaWidth=（英尺*areaW）
var divHeight=（英寸*tileH）
var divWidth=（英寸*tileW）
$（“面积”）.css（“高度”，面积高度）；
$（“面积”）.css（“宽度”，areaWidth）；
var nums=数学楼层（areaWidth/divWidth）*数学楼层（areaHeight/divHeight）
for（设r=0；r

#区域{
边框：1px纯黑；
高度：25px；
宽度：25px；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
}
.边框颜色{
外形：1px实心；
}

瓷砖宽度（英寸）：

瓷砖高度（英寸）：



面积宽度（英尺）：

面积高度（英尺）：

算计
jsfiddle被添加！你的意思是看到所有
div
垂直于
erea
（英尺）？？？？我添加了更多的细节，关于输出应该是怎样的…！所以，你希望内部div填满盒子而不是走出盒子？是的@Gautmanik，这正是我想要的！你想过使用画布吗？