Php 分发div对象

我想做一个网页，可以分布的对象，希望考虑到高度和宽度的对象输入

在第一页中，我输入对象的高度和宽度、对象的数量以及每行的限制。第二页将显示分布的对象

示例：

对象35x60cm，3个数量|对象60x60cm，4个数量|对象 70x70cm，5个数量，限值为200 cm/排

对象将有希望地分布，当达到每行200cm时，将添加另一行，剩余的对象将位于第二行，如果第二行不够，则将是第三行，依此类推

对象将像div

---

提前谢谢

您只能使用CSS和JS来完成分发。以下是HTML代码：

<input type="text" id="inputWidth"=> give me width</input>
<input type="text" id="inputHeight"=> give me height</input>
<input type="text" id="inputNum"=> give me number</input>
<input type="text" id="inputContWidth"=> give me container width</input>
<button onclick="addShapes()">Submit</button>
<div id="container">
</div>

然后使用Javascript使用输入添加所需数量的项：

function addShapes() {
  removeItems();
  var inputWidth = document.getElementById("inputWidth").value;
  var inputHeight = document.getElementById("inputHeight").value;
  var inputNum = document.getElementById("inputNum").value;
  var inputContWidth = document.getElementById("inputContWidth").value;
  document.getElementById("container").style.width = inputContWidth;
  for (var i = 0; i < inputNum; i++) {
    var element = document.createElement("div");
    element.style.width = inputWidth;
    element.style.height = inputHeight;
    element.className = "item";
    document.getElementById("container").appendChild(element);
  }
}

function removeItems() {
  var elements = document.getElementsByClassName("item");
  while (elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0]);
  }
}

函数addShapes（）{
removitems（）；
var inputWidth=document.getElementById（“inputWidth”）.value；
var inputHeight=document.getElementById（“inputHeight”）.value；
var inputNum=document.getElementById（“inputNum”）.value；
var inputContWidth=document.getElementById（“inputContWidth”）.value；
document.getElementById（“容器”）.style.width=inputContWidth；
对于（变量i=0；i0）{
元素[0].parentNode.removeChild（元素[0]）；
}
}

---

这是代码笔：

希望如此？或有用吗？你使用Python吗？如中所示，您是想引用Python分发标记吗？我想用php来做，谢谢！我发现你的问题很难理解，“物体”，你能编辑你的问题并给出物体实际是什么的细节吗？因为它可能不是一个矩形，对象是一个矩形，我必须在第一页输入大小。我不知道Javascript。。。你能做一个快速脚本吗？谢谢@基格里斯编辑。在这个过程中，我不得不学习一些Javascript。好的，非常感谢，但它似乎不起作用。。。我的意思是容器的宽度和我看到的不一样，我也不能识别像颜色或ID这样的物体！我需要更多的输入，比如20或30。。。非常感谢@Kigris您可以使用我提供的框架添加任意多的输入。Stack Overflow不是一个众包开发团队，它不会为您的工作编写代码。这是一个帮助你自己解决问题的平台，我对php和javascript了解不多，所以你的评论没有意义。无论如何谢谢你！

function addShapes() {
  removeItems();
  var inputWidth = document.getElementById("inputWidth").value;
  var inputHeight = document.getElementById("inputHeight").value;
  var inputNum = document.getElementById("inputNum").value;
  var inputContWidth = document.getElementById("inputContWidth").value;
  document.getElementById("container").style.width = inputContWidth;
  for (var i = 0; i < inputNum; i++) {
    var element = document.createElement("div");
    element.style.width = inputWidth;
    element.style.height = inputHeight;
    element.className = "item";
    document.getElementById("container").appendChild(element);
  }
}

function removeItems() {
  var elements = document.getElementsByClassName("item");
  while (elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0]);
  }
}