面试题答疑：如何将减半后的DIV追加到父元素右侧？

嘿，这个需求其实核心就是横向排列子元素的布局问题，结合你已经有的宽高减半逻辑，我给你两种实用的实现方案，都是前端常用的布局方式，你可以根据自己的场景选：

方案一：Flex布局（推荐，现代浏览器友好） #

Flex布局是目前实现横向排列最省心的方式，只需要给父元素设置display: flex，子元素就会自动横向排列，再配合几个属性就能完美适配你的需求：

完整代码示例 #

<div class="parent"></div>

<style>
.parent {
  width: 500px; /* 这里替换成你需要的固定宽高 */
  height: 500px;
  border: 2px solid #222;
  display: flex; /* 开启Flex布局，子元素横向排列 */
  align-items: center; /* 可选：让子元素在垂直方向居中 */
  gap: 10px; /* 可选：子元素之间的间距 */
  overflow-x: auto; /* 子元素太多超出父元素时，显示横向滚动条 */
}

.child {
  flex-shrink: 0; /* 关键：禁止子元素被压缩，保证宽高准确 */
  border: 1px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  background-color: #f5f5f5;
}
</style>

<script>
const parent = document.querySelector('.parent');
// 初始宽高取父元素的实际尺寸
let currentWidth = parent.offsetWidth;
let currentHeight = parent.offsetHeight;

function appendChildDiv() {
  // 宽高小于10时停止追加
  if (currentWidth < 10 || currentHeight < 10) return;

  const child = document.createElement('div');
  child.className = 'child';
  child.style.width = `${currentWidth}px`;
  child.style.height = `${currentHeight}px`;
  child.textContent = `${currentWidth.toFixed(1)}x${currentHeight.toFixed(1)}`; // 显示宽高方便调试

  parent.appendChild(child);

  // 宽高减半，准备下一个子元素
  currentWidth /= 2;
  currentHeight /= 2;

  // 递归调用，持续追加直到满足停止条件
  appendChildDiv();
}

// 页面加载完成后开始生成子元素
window.addEventListener('DOMContentLoaded', appendChildDiv);
</script>

关键细节说明 #

• flex-shrink: 0：必须加这个属性，否则当子元素总宽度超过父元素时，Flex会自动压缩子元素的宽度，导致你设置的宽高失效。
• overflow-x: auto：如果子元素数量太多，父元素会出现横向滚动条，避免布局错乱。
• 如果你不想一次性生成所有子元素，而是点击按钮追加，只需要把递归逻辑改成按钮点击事件触发即可，每次点击生成一个，直到宽高小于10。

方案二：Inline-block布局（兼容旧浏览器） #

如果需要兼容IE11这类旧浏览器，可以用inline-block来实现横向排列：

完整代码示例 #

<div class="parent"></div>

<style>
.parent {
  width: 500px;
  height: 500px;
  border: 2px solid #222;
  white-space: nowrap; /* 关键：让子元素不换行，保持横向排列 */
  overflow-x: auto;
  line-height: 500px; /* 配合vertical-align实现垂直居中 */
}

.child {
  display: inline-block; /* 让子元素横向排列 */
  vertical-align: middle; /* 垂直居中 */
  margin-right: 10px; /* 子元素间距 */
  border: 1px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  background-color: #f5f5f5;
  white-space: normal; /* 让子元素内部文本正常换行 */
}
</style>

<script>
// JS部分和方案一完全一致，直接复用逻辑即可
const parent = document.querySelector('.parent');
let currentWidth = parent.offsetWidth;
let currentHeight = parent.offsetHeight;

function appendChildDiv() {
  if (currentWidth < 10 || currentHeight < 10) return;

  const child = document.createElement('div');
  child.className = 'child';
  child.style.width = `${currentWidth}px`;
  child.style.height = `${currentHeight}px`;
  child.textContent = `${currentWidth.toFixed(1)}x${currentHeight.toFixed(1)}`;

  parent.appendChild(child);

  currentWidth /= 2;
  currentHeight /= 2;

  appendChildDiv();
}

window.addEventListener('DOMContentLoaded', appendChildDiv);
</script>

关键细节说明 #

• white-space: nowrap：强制父元素内的子元素不换行，保持横向排列。
• vertical-align: middle：配合父元素的line-height实现子元素垂直居中，如果你不需要垂直居中可以去掉这两个属性。

额外小提示 #

• 如果父元素的宽高是通过JS动态设置的，一定要确保在宽高设置完成后再调用appendChildDiv，否则获取到的offsetWidth/offsetHeight会不准确。
• 可以给子元素加上box-sizing: border-box，这样边框不会额外占用宽高，保证你设置的尺寸是元素的实际显示尺寸。

内容的提问来源于stack exchange，提问作者PowPowPow