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

Question

幾個月前，我接受了有關以下問題和准則的前端采訪：

• 您將獲得基線CSS，HTML和JS
• 您無權直接編輯預定義的HTML或CSS
• 您可以添加新的CSS類，並使用所需的任何版本的jQuery或Vanilla JS

目標1 ：點擊＃容器時，將框（400px x 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循環來重新創建“新”節點，我們可以將其追加四次。 我還在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

我的解決方案： 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; 解決使用inline-block可能會發現的間距問題，以消除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>