前端面试提示：进入宿舍

Question

几个月前，我进行了一次前端访谈，其中包括以下问题和指南：

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

目标1：当您单击#container时，将框（400px×400px）分成四个大小相等的框。

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

我的问题无论我做什么，盒子都没有完美划分。不知道为什么内联块没有做到这一点，或者我不能追加多个节点。有人有专家小贴士吗？

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

从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>

Answer 2

我的解决方案：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 3

这是我的解决方案。

• 使用e.target可以让你继续钻进。
• vertical-align: top和line-height: 1px;地址间距问题你可能会发现inline-block每Get rid of space underneath inline-block image

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>