Javascript 前端面试提示：分为两个季度

几个月前，我接受了一次前端面试，遇到了以下问题和指导方针：

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

目标1：单击#容器时，将盒子（400px乘以400px）分成四个大小相等的盒子

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

我的问题 无论我做什么，盒子都不会完全分开。我不知道内联块为什么不这样做，或者我不能附加多个节点。有谁有一些专家提示吗

var c=document.getElementById（“容器”）；
c、 addEventListener（“单击”，函数（e）{
var节点=document.createElement（“div”）；
node.className=“boxxie”；
c、 追加子节点；
c、 追加子节点；
c、 追加子节点；
c、 追加子节点；
})

*，
*：之前，
*：之后{
框大小：边框框；
}
#容器{
边框：1px实心#2196f3；
宽度：400px；
高度：400px；
}
鲍克谢先生{
显示：内联块；
身高：50%；
宽度：50%；
外形：1px纯黑；
}

我的解决方案：

添加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'));
  }
});

document.querySelector（'body'）。addEventListener（'click'，（e）=>{
如果（！e.target.matches（'div'））{
返回；
}
对于（设i=0；i，这里是我的解


使用
e.target
可以让您继续向下钻取
垂直对齐：顶部
和
行高：1px；
使用
内联块时可能会发现的地址间距问题



const c=document.getElementById（“容器”）；
c、 addEventListener（“单击”，e=>{
const target=e.target；
for（设i=0；i<4；i++）{
const child=document.createElement（“div”）；
目标儿童（child）；
}
})；
#容器{
宽度：400px；
高度：400px；
边框：1px纯蓝色；
框大小：边框框；
}
#货柜组{
边框：1px纯红；
显示：内联块；
框大小：边框框；
宽度：50%；
身高：50%；
垂直对齐：顶部；
线高：1px；
}
从JS的角度来看，除了回答@drewkiimon“没有flex就可以吗？”
本例使用浮点数


document.querySelector（'body'）。addEventListener（'click'，（e）=>{
如果（！e.target.matches（'div'））{
返回；
}
for（设i=0；i<4；i++）{
e、 target.appendChild（document.createElement（'div'）；
}
})
*，
*：之前，
*：之后{
框大小：边框框；
}
#容器{
边框：1px实心#2196f3；
宽度：400px；
高度：400px；
}
/* ---------- */
#货柜组{
浮动：左；
宽度：50%；
身高：50%；
外形：1个实心番茄；
背景色：rgba（64224208.1）；
}
我已更新了您的问题，以包括您的JSFIDLE的相关部分。请随意编辑可运行代码段，以更准确地反映您的实际代码正在执行的操作。您问题中的代码没有准确反映小提琴中的内容，因此它们以我认为正确的方式合并，但您应该检查它确保。请尝试在你的问题中包含所有相关代码，而不是在外部网站上。非常好！不幸的是，当你开始单击方框时，它也会改变所有其他方框的大小。我不认为几个月前我的面试官会接受这个答案。你确实解决了同时添加所有四个方框的问题，这非常有帮助pful！谢谢你。@AndrewPagan只要把
边框
改成
轮廓
就行了。轮廓效果很好！这是100%的正确答案。你认为不使用flex就可以做到吗？@Drewkimon当然，我的意思是，我可以用螺丝刀的钝头敲打钉子，但为什么在锤子很多的时候要这样做呢？这对首先点击几下，然后如果你点击较小的方块，就会开始在意想不到的地方扔盒子。这仍然是一个很好的答案，但不幸的是不能100%解决它。该死的，这是一个超级可靠的答案。谢谢你把它放在这里让我们看！