Question

几个月前，我进行了一次前端采访，涉及以下问题和准则：

为您提供了基线CSS，HTML和JS
不允许您直接编辑预定义的HTML或CSS
您可以添加新的CSS类，并使用所需的jQuery版本或Vanilla JS

目标1 ：当您单击＃容器时，将框（400px x 400px）划分为四个大小相同的框。

目标2 ：当您点击在目标1中创建的框之一时，该框也将分为4个大小相等的框。

我的问题 无论我做什么，盒子都不会完美地分开。不知道为什么内联块不这样做，还是我不能追加多个节点。任何人都有一些专家提示？

O(k)

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;
}

这是jsfiddle random.py

感谢@wbarton，我能够在不使用flexbox的情况下获得此答案。我坚决不使用flexbox，因为我非常有信心它不需要它。久而久之，没有它，有解决方案。通过使用float：left，我们可以避免垂直对齐，并且通过创建for循环来重新创建“新”节点，我们可以将其追加四次。我还在div上使用了一个类，而不是在div上使用了直接的CSS选择器。

谢谢大家的帮助！结案了。

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

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;
}

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个孩子。

Answer 2

这是我的解决方案。

使用e.target可让您继续深入研究。
vertical-align: top和line-height: 1px;解决地址间隔问题，您可能会每Get rid of space underneath inline-block image使用inline-block

const c = document.getElementById("container");

c.addEventListener("click", e => {
  const target = e.target;

  for (let i = 0; i < 4; i++) {
    const child = document.createElement("div");
    target.appendChild(child);
  }
});

#container {
  width: 400px;
  height: 400px;
  border: 1px solid blue;
  box-sizing: border-box;
}

#container div {
  border: 1px solid red;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  vertical-align: top;
  line-height: 1px;
}

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

Answer 3

从JS角度看，除了@drewkiimon“没有flex可能吗？此示例使用浮点数。

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

*,
*:before,
*:after {
  box-sizing: border-box;
}

#container {
  border: 1px solid #2196f3;
  width: 400px;
  height: 400px;
}

/* ---------- */

#container div {
  float: left;
  width: 50%;
  height: 50%;
  outline: 1px solid tomato;
  background-color: rgba(64, 224, 208, .1);
}

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

前端面试提示：四分之一盒

3 个答案: