javascript - DIV 分成两半并作为子项添加到循环中

Question

我在最近的一次采访中被问到这个问题。

问题陈述 - 给定一个特定宽度和高度的 div，继续向其附加 div，但在附加之前将其大小缩小到一半。直到高度/宽度小于10。附上我的解决方案

let toggle = true;
let border = 0;
container = $('.mainBox');
while (container.height() > 10 || container.width() > 10) {
  if(toggle) {
    container = splitVertically(container); 
    toggle = false;
  } else {
    container = splitHorizontally(container);
    toggle = true;
  }
}     

function splitVertically(container) {
  let $newElem = $('<div>')
    .width(container.width()/2)
    .height(container.height())   
    .css('border-right', 'solid 1px');
  container.append($newElem); 
  return $newElem;
}

function splitHorizontally(container) {
  let $newElem = $('<div>')
    .height(container.height()/2)
    .width(container.width())
    .css('border-bottom', 'solid 1px');
  container.append($newElem);
  return $newElem;
}
  
  
  

.mainBox {
  width: 500px;
  height: 200px;
  /*   background: blue; */
  border: 1px solid;
}

.addBorder {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mainBox"></div>

如果我想将 div 添加到父级的右侧，我该怎么做？

谢谢!

Answer 1

你可以试试把 border-left 和 float:right

let toggle = true;
let border = 0;
container = $('.mainBox');
while (container.height() > 10 || container.width() > 10) {
  if (toggle) {
    container = splitVertically(container);
    toggle = false;
  } else {
    container = splitHorizontally(container);
    toggle = true;
  }
}

function splitVertically(container) {
  let $newElem = $('<div class="pull-right">')
    .width(container.width() / 2)
    .height(container.height())
    .css('border-left', 'solid 1px');
  container.append($newElem);
  return $newElem;
}

function splitHorizontally(container) {
  let $newElem = $('<div class="">')
    .height(container.height() / 2)
    .width(container.width())
    .css('border-bottom', 'solid 1px');
  container.append($newElem);
  return $newElem;
}

.mainBox {
  width: 500px;
  height: 200px;
  /*   background: blue; */
  border: 1px solid;
}

.addBorder {
  border: 1px solid;
}

.pull-right {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mainBox"></div>