Question

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

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

示例：

对象35x60cm，3个数量|物体60x60cm，4个数量|宾语 70x70cm，5个数量，限制为每排200厘米。

对象将有希望分发，当达到每行200cm时，将添加另一行，剩余对象将位于第二行，如果第二行不够，则它将是第3行等等。

对象将像div一样！

提前致谢！

Answer 1

您只能使用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>

分发的CSS代码。这是为了分发项目并使它们可见：

#container {
  position: relative;
  background-color: gray;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.item {
  position: relative;
  background-color: blue;
  border-style: solid;
}

然后使用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]);
  }
}

以下是codepen：http://codepen.io/gingerdeadshot/pen/JXZNGX

希望分发div对象

1 个答案: