怎么将两个div模块合在一行

在网页布局中，如果你想把两个`<div>`元素放在同一条水平线上，可以使用CSS的`display`属性和`flexbox`或`grid`布局来实现。以下是两种常见方法：

**1. 使用Flexbox**:

<div class="container">
  <div class="item item1">Div 1</div>
  <div class="item item2">Div 2</div>
</div>

<style>
.container {
  display: flex; /* 设置容器为弹性布局 */
  justify-content: space-between; /* 容器内的项目均匀分布，留有间隔 */
}

.item {
  flex-grow: 1; /* 让每个子项等比例分配剩余空间 */
}
</style>

**2. 使用Grid布局**:

<div class="container grid-container">
  <div class="item grid-item">Div 1</div>
  <div class="item grid-item">Div 2</div>
</div>

<style>
.container.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 创建一列，自适应宽度 */
}

.item.grid-item {
  align-self: stretch; /* 确保子项填满行 */
}
</style>

在这两种方法中，`.item`类的`div`s会被自动排列在一行上。