几个月前我接受了一次前端面试,遇到了以下问题和指南:
- 您已获得基准 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>
最佳答案
我的解决方案: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 。
关于javascript - 前端面试提示: Box into Quarters,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51291764/