css实现两个div在同一行两端

要让两个`<div>`元素在同一行并分别位于两端，你可以使用CSS的`display`, `flexbox` 或者 `grid` 属性。以下是两种常见的方法：

1. **Flex布局**:

.container {
  display: flex; /* 开启弹性盒模型 */
  justify-content: space-between; /* 子元素均匀分布，第一个元素靠左，第二个元素靠右 */
}
<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
</div>

2. **Grid布局** (适用于更复杂的网格结构)：

.container {
  display: grid;
  grid-template-columns: repeat(1, minmax(auto-fit, 1fr)); /* 创建一行，每个子项占据剩余空间 */
  gap: 10px; /* 定义子元素之间的间隔 */
}
<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
</div>

在这两种方法中，`.container` 是包含这两个`<div>`的容器，`div 1` 和 `div 2` 将会在同一行上，各自占据相应的位置。