如何在 div 中动态添加 div 直到父 div 的宽度和高度已满/完成

Question

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

技术信息：我已将 1 英尺等于 60 像素和 1 英寸等于 5 像素进行计算。

我现在在哪里？ 现在我被困在 (parent div) 区域中绘制所有图块 (child div's)。现在我正在使用简单的 for 循环来制作图块 (div's)。

现在输出是这样的......

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

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

代码：

        $(document).ready(function () {
            $("#btnCalculate").click(function (e) { 
                e.preventDefault();

                $("#area").empty();

                const foot = 60, inch = 5;

                let tileW = parseFloat($("#tileWidth").val());
                let tileH = parseFloat($("#tileHeight").val());

                let areaW = parseFloat($("#areaWidth").val());
                let areaH = parseFloat($("#areaHeight").val());
                
                $("#area").css("height", (foot * areaH));
                $("#area").css("width", (foot * areaW));


                for (let r = 0; r<10  ; r++) {
                    // const element = array[r];
                    $("#area").append("<div id='tile_"+r+"' style='width:"+((inch * tileW))+"px; height:"+((inch * tileH))+"px;' class='border_color'> </div>");
                    
                }
            });
        });

#area {
            border: 1px solid black;
            height: 25px;
            width: 25px;
        }
        .border_color{
            /* border: 1px solid black; */
            outline: 1px solid; /* use instead of border */
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id ="tileWidth" placeholder="Tile Width" value="6">
    <p>Tile Height (inches): </p><input type="numbers" id ="tileHeight" placeholder="Tile Height" value="4">
    <br>
    <p>Area Width (foot): </p><input type="numbers" id ="areaWidth" placeholder="Area Width" value="11.5">
    <p>Area Height (foot): </p><input type="numbers" id ="areaHeight" placeholder="Area Height" value="6.5">
    <button id="btnCalculate" >Calculate</button>
        
    

    <div id="area">

    </div>

Fiddle 的外链：https://jsfiddle.net/22gLkguL/

我已经尝试存档所有这些但失败了..！ 有人可以帮助我或引导我走上正确的道路吗？

Answer 1

使用display: flex 和flex-wrap: wrap

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

并计算每边（宽度或高度）最多可以填充的divs 的数量。

$(document).ready(function() {
  $("#btnCalculate").click(function(e) {
    e.preventDefault();

    $("#area").empty();

    const foot = 60,
      inch = 5;

    let tileW = parseFloat($("#tileWidth").val());
    let tileH = parseFloat($("#tileHeight").val());

    let areaW = parseFloat($("#areaWidth").val());
    let areaH = parseFloat($("#areaHeight").val());
    
    var areaHeight = (foot * areaH)
    var areaWidth = (foot * areaW)
    var divHeight = (inch * tileH)
    var divWidth = (inch * tileW)
    
    $("#area").css("height", areaHeight);
    $("#area").css("width", areaWidth);

    var nums = Math.floor(areaWidth/divWidth) * Math.floor(areaHeight/divHeight)

    for (let r = 0; r < nums; r++) {
      var $div = $('<div>', {
        id: 'tile_' + r,
        class: 'border_color',
        height: divHeight,
        width: divWidth,
      })
      $("#area").append($div);

    }
  });
});

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

.border_color {
  outline: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id="tileWidth" placeholder="Tile Width" value="6">
<p>Tile Height (inches): </p><input type="numbers" id="tileHeight" placeholder="Tile Height" value="4">
<br>
<p>Area Width (foot): </p><input type="numbers" id="areaWidth" placeholder="Area Width" value="11.5">
<p>Area Height (foot): </p><input type="numbers" id="areaHeight" placeholder="Area Height" value="6.5">
<button id="btnCalculate">Calculate</button>



<div id="area">

</div>

Answer 2

使用display: flex; flex-wrap: wrap 作为区域元素。

并计算Tiles的数量为---

(areaWidthInPixels/tileWidthinPixels) * (areaHeightInPixels/tileHeightinPixels)

        $(document).ready(function () {
            $("#btnCalculate").click(function (e) { 
                e.preventDefault();

                $("#area").empty();

                const foot = 60, inch = 5;

                let tileW = parseFloat($("#tileWidth").val());
                let tileH = parseFloat($("#tileHeight").val());

                let areaW = parseFloat($("#areaWidth").val());
                let areaH = parseFloat($("#areaHeight").val());
                
                $("#area").css("height", (foot * areaH));
                $("#area").css("width", (foot * areaW));
                
                let noOfTiles = Math.floor( ((foot * areaW)/(inch * tileW)) )* Math.floor( ((foot * areaH)/(inch * tileH)) );
								
                alert("noOf TIles :: " + noOfTiles);
                
                for (let r = 1; r <= noOfTiles  ; r++) {
                    // const element = array[r];
                    var bgColor = r % 2 == 0 ? "red" : "green";
                    $("#area").append("<div id='tile_"+r+"' style='width:"+((inch * tileW))+"px; height:"+((inch * tileH))+"px; background-color: " + bgColor + "'' class='border_color'> </div>");
                    
                }
            });
        });

#area {
            border: 1px solid black;
            height: 25px;
            width: 25px;
            display: flex;
            flex-wrap: wrap;
        }
        .border_color{
            /* border: 1px solid black; */
            outline: 0px solid; /* use instead of border */
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id ="tileWidth" placeholder="Tile Width" value="6">
    <p>Tile Height (inches): </p><input type="numbers" id ="tileHeight" placeholder="Tile Height" value="4">
    <br>
    <p>Area Width (foot): </p><input type="numbers" id ="areaWidth" placeholder="Area Width" value="11.5">
    <p>Area Height (foot): </p><input type="numbers" id ="areaHeight" placeholder="Area Height" value="6.5">
    <button id="btnCalculate" >Calculate</button>
        
    

    <div id="area">

    </div>