要让 `div` 下面的按钮一行一行地排列起来，你可以用各种CSS布局技巧。这里有几种常用的方法：

1. 使用display:inline-block;

将每个 button 元素设置为 display: inline-block;，它们将在 div 容器内水平排列，直到没有足够的空间，然后自动换行。

button {
  display: inline-block;
  margin: 0 10px 10px 0; /* 右边和下边的外边距 */
}

2. 使用display: flex;

将 div 容器设置为 display: flex;，子 button 元素将在同一行内排列。如果需要它们自动换行，可以将 flex-wrap 属性设置为 wrap。

.div-container {
  display: flex;
  flex-wrap: wrap;
}
button {
  margin: 0 10px 10px 0; /* 右边和下边的外边距 */
}

3. 使用display: grid;

将 div 容器设置为 display: grid;，可以创建一个网格布局，其中 button 元素可以分布在多行。

.div-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px; /* 网格项之间的间隙 */
}
button {
  /* 如果需要，可以设置宽度 */
}

4. 使用float属性

虽然这不是响应式布局的首选方法，但你可以为 button 元素设置 float: left;，使它们在同一行内排列。

button {
  float: left;
  margin: 0 10px 10px 0; /* 右边和下边的外边距 */
}

记得在 div 容器后使用 clear: both; 清除浮动，以防止布局问题。

HTML结构

在所有情况下，你的HTML结构将类似于：

<div class="div-container">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <!-- 更多按钮... -->
</div>

哎呀，你要看具体情况啦！要看你是不是需要自动换行，按钮宽度是不是固定的，还有你需不需要更复杂的布局控制。一般来说，flex 和 grid 这两个选项比较现代和强大哦。