javascript - 前端面试提示: Box into Quarters

Question

几个月前我接受了一次前端面试，遇到了以下问题和指南:

• 您已获得基准 CSS、HTML 和 JS
• 您不能直接编辑预定义的 HTML 或 CSS
• 您可以添加新的 CSS 类并使用您想要的任何版本的 jQuery 或 Vanilla JS

目标 1:当您点击 #container 时，将框(400 像素 x 400 像素)分成四个大小相等的框。

目标 2:当您单击在目标 1 中创建的其中一个框时，该框也会分成 4 个大小相等的框。

我的问题无论我做什么，盒子都不能完美地分开。不确定为什么 inline-block 没有按照我的想法去做，或者我不能附加一个以上的节点。谁有一些专家提示？

var c = document.getElementById("container");

c.addEventListener("click", function(e) {
  var node = document.createElement("div");
  node.className = "boxxie";
  c.appendChild(node);
  c.appendChild(node);
  c.appendChild(node);
  c.appendChild(node);
})

*,
*:before,
*:after {
  box-sizing: border-box;
}

#container {
  border: 1px solid #2196f3;
  width: 400px;
  height: 400px;
}

.boxxie {
  display: inline-block;
  height: 50%;
  width: 50%;
  outline: 1px solid black;
}

<div id="container"></div>

这是 jsfiddle https://jsfiddle.net/drewkiimon/fvx632ab/

---

感谢@wbarton，我能够在不使用 flexbox 的情况下得到这个答案。我坚持不使用 flexbox，因为我非常确信它不需要它。很长一段时间，没有它就有解决方案。通过使用 float: left，我们可以避免垂直对齐，并且通过创建一个 for 循环来重新创建一个"new"节点，我们可以将它追加四次。我还在我的 div 中使用了一个类，而不是 div 上的直接 CSS 选择器。

谢谢大家的帮助!结案。

document.getElementById("container").addEventListener('click', function(e) {
	for (var i = 0; i < 4; i ++) {
  	var node = document.createElement("div");
  	node.className = "boxxie";
  	e.target.appendChild(node);
  }
})

*,
*:before,
*:after {
  box-sizing: border-box;
}

#container {
  border: 1px solid #2196f3;
  width: 400px;
  height: 400px;
}

.boxxie {
  outline: 1px solid tomato;
  width: 50%;
  height: 50%;
  float: left;
}

<div id="container"></div>

Answer 1

我的解决方案:https://jsfiddle.net/fvx632ab/106/

添加的 CSS:

div {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  outline: 1px solid #f33;
  width: 50%;
  flex-wrap: wrap;
}

通过定义一些合理的布局，Flexbox 使这对我们来说很容易。我们将子项的宽度设置为 50%，并启用换行以便我们得到两行(因为我们要添加四个元素)。

然后，在我的 JavaScript 中:

document.querySelector('body').addEventListener('click', (e) => {
  if (!e.target.matches('div')) {
    return;
  }
  for (let i=0; i<=3; i++) {
    e.target.appendChild(document.createElement('div'));
  }
});

我们监听对 body 的点击(因为稍后我们要添加更多的 div)，但只过滤我们想要的选择器，即 div .然后，我们只添加 4 个 child 。