时间戳

首页 > 解决方案 > 创建具有不同 %width 的新 div

javascript - 创建具有不同 %width 的新 div

问题描述

我用一个 div 创建了一个部分。每次单击时，“单击”按钮都会添加新的 div。我需要什么：div 1 -> 100% 宽度（部分）当我单击时：div 1 和 div2（div 2 新）-> 分别获得 50% 的宽度。再次单击：div1、div2 和 div3 -> 各 30% 宽度。再次单击：div 4 以相同的宽度进入下一行

你有什么主意吗？ https://jsfiddle.net/Vova_Champion/tcyw64wq/6/

document.getElementById("button").onclick = function() {
  let ok = true;
  if (ok === true) {
    let div = document.createElement('div');
    div.className = 'new-div';

    document.getElementsByTagName('section')[0].appendChild(div);
  }
};
section {
  display: flex;
  height: 100px;
  width: 200px;
  background: red;
  flex-wrap: wrap;
  overflow: auto;
}

div {
  display: block;
  height: 30px;
  width: 100%;
  max-width: 30%;
  background: blue;
  margin: 5px 2px;
}

#button {
  color: red
}
<button id="button">Click button</button>
<section id="section">
  <div></div>
</section>

标签： javascriptcsswidth

解决方案

使用这个 div 样式：

div {
  flex-grow: 1;
  display:block;
  height: 30px;
  min-width: 30%;
  background: blue;
  margin: 5px 2px;
}

“Flex-grow”在 div 中赋予它们“权重”，具有相同 flex 增长的项目共享相同部分的可用空间。最小宽度会触发第 4 个 div 向下，因为将其添加到同一行会使它们的宽度变为 25%。

如果您需要任何进一步的解释，请询问！

推荐阅读