Question

嗨，我正在尝试在mainContent div中创建列和行，但问题是在2-3次单击后它脱离了mainContent。我希望它保留在内部，并应在其中创建大小相等的列和行。这是我的代码。

var test2 = document.getElementById('btn');
test2.addEventListener('click', function() {
  console.log('clicked');
  var contain = document.getElementById('contentArea'); // for selecting id
  var newGriding = document.createElement('div');
  newGriding.setAttribute('id', 'grid');
  contain.appendChild(newGriding);
});

#contentArea {
  background-color: #babab3;
  height: 74vh;
  margin: 0 auto;
}

#grid {
  margin: 0;
  padding: 0;
  border: none;
  outline: 5px dashed #aba4a4;
  display: inline-block;
  height: 100%;
  width: 50%;
}

<div id="contentArea">
</div>
<button id="btn">
    create
</button>

Answer 1

因为要对附加元素使用固定高度。

您应在每次点击后使用某种逻辑调整元素的大小，或者将parent的显示设置为flex和flex wrap为真。

var test2 = document.getElementById('btn');
test2.addEventListener('click', function() {
  var contain = document.getElementById('contentArea'); // for selecting id
  var newGriding = document.createElement('div');
  newGriding.setAttribute('id', 'grid');
  contain.appendChild(newGriding);
});

#contentArea {
  background-color: #babab3;
  height: 74vh;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#grid {
  margin: 0;
  padding: 0;
  border: none;
  outline: 5px dashed #aba4a4;
  display: inline-block;
  width: 50%;
}

<div id="contentArea">
</div>
<button id="btn">create</button>

或

var test2 = document.getElementById('btn');
test2.addEventListener('click', function() {
  var contain = document.getElementById('contentArea'); // for selecting id
  var newGriding = document.createElement('div');
  newGriding.setAttribute('id', 'grid');
  contain.appendChild(newGriding);
  resizeDiv();
});
var maxInRow = 2;

function resizeDiv() {
  var allGrids = document.querySelectorAll("#contentArea > #grid");

  var width = 100 / maxInRow;
  var len = allGrids.length;
  var colNo = Math.floor(len / maxInRow);
  colNo = colNo - (len / maxInRow) == 0 ? colNo : colNo + 1;

  var height = 100 / colNo;
  for (var i = 0; i < len; i++) {
    allGrids[i].style.width = width + "%";
    //"calc(" + width + "% - 10px)"; --- if doesn't want box-sizing to be borderbox
    allGrids[i].style.height = height + "%";
    //"calc(" + height + "% - 10px)"; --- if doesn't want box-sizing to be borderbox
    //reduce the size of box which increased due to outline
  }
}

#contentArea {
  background-color: #babab3;
  height: 74vh;
  margin: 0 auto;
  position: relative;
}

#grid {
  margin: 0;
  padding: 0;
  border: 5px dashed #aba4a4;
  display: inline-block;
  height: 100%;
  width: 50%;
  position: relative;
  box-sizing: border-box;
}

<div id="contentArea">
</div>
<button id="btn">
    create
</button>

在javascript中将div拆分为多个div

1 个答案: