css 盒子中两个元素一个在顶部一个在底部

在CSS布局中，如果你想让两个元素分别位于盒子的顶部和底部，可以利用Flexbox或Grid布局。这里有两个常见的方法：

1. **Flexbox**:
如果容器设置为`display: flex;`，并且设置了`align-items`属性，你可以轻松控制项目在交叉轴上的对齐方式。例如：

   .container {
     display: flex;
     align-items: flex-start; /* 上部元素顶对齐 */
     justify-content: space-between; /* 可选，用于调整两者间距 */
   }
   .top-element { /* 上部元素 */
     flex: 0 0 auto; /* 高度固定 */
   }
   .bottom-element { /* 下部元素 */
     align-self: flex-end; /* 底部对齐 */
     /* 高度同样需要设置或由内容撑开 */
   }

2. **Grid布局**:
使用`grid-template-rows`和`place-items`属性可以更直观地定位网格项：

   .container {
     display: grid;
     grid-template-rows: auto 1fr; /* 上部auto高度自适应，下部占剩余空间 */
     place-items: start end; /* 分别对齐到开始和结束线 */
   }
   .top-element { /* 上部元素 */
     /* ... */
   }
   .bottom-element { /* 下部元素 */
     /* ... */
   }