如何使多个div动态地占据整行100%的宽度？

Question

我们有一个数字和一个分割数字，我们想将该数字分割'split number'次，并且所有分割后的div应该占据或加起来等于100%的宽度，即分割后的div应该在单行上。此外，我们需要动态地实现这一点。请帮我解决这个问题。

var split_button = document.querySelector(".btn");
split_button.addEventListener("click", myfunc);

function myfunc() {
  number = parseInt(document.querySelector("#number").value);
  split = parseInt(document.querySelector("#split").value);
  var displayDiv = document.getElementById("disp");
  displayDiv.innerHTML = "";
  if (split > number) {
    generateErrorMessage(
      "Please enter number of splits less than number itself!"
    );
  } else if (number > 100 || number < 1) {
    generateErrorMessage(
      "Please enter number greater than 0 and less than 101"
    );
  } else if (split == 0) {
    generateErrorMessage("Split can't be done null");
  } else {
    let n = split;
    for (var i = 0; i < split; i++) {
      if (number % n == 0) {
        var divWidth = number / n;
      } else {
        var divWidth = Math.floor(number / n) + 1;
      }

      let tag = document.createElement("div");
      tag.className = "fill";

      var randomcolor = getRandomColor();
      tag.style.backgroundColor = randomcolor;
      tag.style.width = divWidth + "%";
      tag.textContent = divWidth;
      displayDiv.appendChild(tag);
      number = number - divWidth;
      n = n - 1;
    }
  }
}

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function generateErrorMessage(msg) {
  errdiv = document.querySelector(".err-div");
  errpara = document.createElement("p");
  errpara.textContent = msg;
  errdiv.appendChild(errpara);
  errdiv.classList.add("err-msgs");
  console.log(errdiv);
  setTimeout(() => {
    errdiv.innerHTML = "";
    errdiv.classList.remove("err-msgs");
  }, 5000);
}

.container {
    background-color: white;
    padding-top: 10px;
}

body {
    background-color: lightblue;
}

.num {
    margin-bottom: 10px;
}

button {
    margin-left: 10px;
}

.disp {
    background-color: whitesmoke;

}

.fill {
    display: inline-block;
    background-color: aqua;
    /* border: 2px solid black; */
    height: 100px;
    text-align: center;
    color: white;
    font-size: 50px;
    /* padding: 10px; */

}

.err-msgs {

    padding: 20px;
    background-color: pink;
}

 <div class="container my-5">
      <!-- <p>Sorry there was an error</p> -->
        <div class="err-div"></div>  
        <div class="form-group p-2">
          <label for="number" class="num">Enter a Number</label>
          <input type="number" class="form-control" id="number" />
        </div>
        <div class="form-group p-2">
          <label for="split" class="num"
            >Enter number of times you want to split</label
          >
          <input type="number" class="form-control" id="split" />
        </div>

        <button  class="btn btn-primary my-2">Split</button>
      

      <div id="disp"></div>
  </div>

Also same value div should take same amount of width.

- Franky11

---

你想要每个分割项单独成行吗？ - Viira

不，分割应该在单行上进行。 - Franky11

https://codepen.io/Ev1ltw1n/pen/abYXbWg 这个？ - Viira

不。所有的div应该在同一行上而不是叠在一起，它们应该占据整个行宽度的100%，无论它们是1、2还是26或100等。 - Franky11

这是默认行为，请重试该链接。 - Viira

Answer 1

您需要将flex添加到父级元素中。

#disp {
    background-color: whitesmoke;
    display: flex;
    width:100%;
    flex-direction: row;
}

在子元素上，您可以使用CSS。

.fill {
    display: flex;
    flex-grow: 1;
}

var split_button = document.querySelector(".btn");
split_button.addEventListener("click", myfunc);

function myfunc() {
  number = parseInt(document.querySelector("#number").value);
  split = parseInt(document.querySelector("#split").value);
  var displayDiv = document.getElementById("disp");
  displayDiv.innerHTML = "";
  if (split > number) {
    generateErrorMessage(
      "Please enter number of splits less than number itself!"
    );
  } else if (number > 100 || number < 1) {
    generateErrorMessage(
      "Please enter number greater than 0 and less than 101"
    );
  } else if (split == 0) {
    generateErrorMessage("Split can't be done null");
  } else {
    let n = split;
    for (var i = 0; i < split; i++) {
      if (number % n == 0) {
        var divWidth = number / n;
      } else {
        var divWidth = Math.floor(number / n) + 1;
      }

      let tag = document.createElement("div");
      tag.className = "fill";

      var randomcolor = getRandomColor();
      tag.style.backgroundColor = randomcolor;
      // tag.style.width = divWidth + "%";
      tag.textContent = divWidth;
      displayDiv.appendChild(tag);
      number = number - divWidth;
      n = n - 1;
    }
  }
}

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function generateErrorMessage(msg) {
  errdiv = document.querySelector(".err-div");
  errpara = document.createElement("p");
  errpara.textContent = msg;
  errdiv.appendChild(errpara);
  errdiv.classList.add("err-msgs");
  console.log(errdiv);
  setTimeout(() => {
    errdiv.innerHTML = "";
    errdiv.classList.remove("err-msgs");
  }, 5000);
}

.container {
    background-color: white;
    padding-top: 10px;
}

body {
    background-color: lightblue;
}

.num {
    margin-bottom: 10px;
}

button {
    margin-left: 10px;
}

#disp {
    background-color: whitesmoke;
    display: flex;
    width:100%;
    flex-direction: row;
}

.fill {
    display: flex;
    flex-grow: 1;
    background-color: aqua;
    /* border: 2px solid black; */
    height: 100px;
    text-align: center;
    color: white;
    font-size: 50px;
    /* padding: 10px; */

}

.err-msgs {

    padding: 20px;
    background-color: pink;
}

<div class="container my-5">
      <!-- <p>Sorry there was an error</p> -->
        <div class="err-div"></div>  
        <div class="form-group p-2">
          <label for="number" class="num">Enter a Number</label>
          <input type="number" class="form-control" id="number" />
        </div>
        <div class="form-group p-2">
          <label for="split" class="num"
            >Enter number of times you want to split</label
          >
          <input type="number" class="form-control" id="split" />
        </div>

        <button  class="btn btn-primary my-2">Split</button>
      

      <div id="disp"></div>
  </div>

- Naren Murali

Answer 2

不要给子组件设置百分比宽度，而是将父组件设置为flex，并给子组件设置flex:1，这样它的宽度会自动适应并具有响应性。

- Mad max