前端面试提示:方框进入季度

Question

几个月前，我进行了一次前端面试，讨论了以下问题和指导方针：

• 您将获得基线CSS、HTML和JS。
• 不允许直接编辑预定义的HTML或CSS
• 您可以添加新的CSS类并使用任意版本的jQuery或Vanilla。

目标1：当您单击#容器时，将该框(即400 by乘400 by)划分为四个大小相等的盒子。

目标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，我才能在不使用柔性盒的情况下得到这个答案。我坚持不使用柔性盒，因为我很有信心它不会需要它。久而久之，没有它就有解决办法。通过使用float: left，我们可以避免垂直对齐，通过创建一个for-循环，我们可以重新创建一个“新”节点，我们只需追加四次。我还在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之外，没有什么新的东西是不可能的吗？此示例使用浮点数。

​

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>

​