JS 让盒子内两个小盒子一个在上一个在下

可以使用CSS中的`flexbox`或者`grid`布局来实现。以下是使用`flexbox`布局的示例代码：

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px; /* 设置容器高度 */
}

.box {
  width: 50px;
  height: 50px;
  background-color: #ccc;
}

上面的代码中，我们使用了`flex-direction: column`将容器内的子元素垂直排列，然后使用了`justify-content: space-between`将两个子元素分别放置在容器的顶部和底部，从而实现了一个在上一个在下的效果。

相关问题

如何给盒子内添加一个js折叠菜单栏

要给盒子内添加一个折叠菜单栏，需要使用JavaScript和CSS。以下是一个基本的实现步骤：

1. 在HTML文件中创建一个盒子（可以使用div元素）。
2. 在该盒子内创建一个标题元素（可以使用h2或h3元素），并添加一个点击事件监听器。
3. 在JavaScript文件中编写一个函数，当标题元素被点击时，切换菜单栏的显示/隐藏状态。
4. 在CSS文件中定义菜单栏的样式，例如高度、背景颜色、字体等。
5. 最后，将JavaScript文件和CSS文件链接到HTML文件中。

以下是一个简单的示例代码：

HTML:

<div class="box">
  <h2 class="title">菜单栏标题</h2>
  <ul class="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

CSS:

.box {
  border: 1px solid #ccc;
  padding: 10px;
}
.title {
  cursor: pointer;
}
.menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 5px;
  background-color: #f5f5f5;
}

JavaScript:

const title = document.querySelector('.title');
const menu = document.querySelector('.menu');

title.addEventListener('click', function() {
  menu.classList.toggle('show');
});

在这个示例中，当用户点击标题时，JavaScript将会添加或删除CSS中定义的“show”类，进而切换菜单栏的显示/隐藏状态。

js盒子内的子元素盒子移动到另一个盒子

可以使用以下步骤将一个盒子内的子元素盒子移动到另一个盒子中：

1. 获取要移动的子元素盒子和目标盒子的引用。

2. 使用appendChild()方法将子元素盒子添加到目标盒子中。

3. 使用removeChild()方法将子元素盒子从原始盒子中删除。

以下是示例代码：

// 获取要移动的子元素盒子和目标盒子的引用
var childBox = document.getElementById("child-box");
var targetBox = document.getElementById("target-box");

// 将子元素盒子添加到目标盒子中
targetBox.appendChild(childBox);

// 将子元素盒子从原始盒子中删除
var parentBox = document.getElementById("parent-box");
parentBox.removeChild(childBox);